Design

Research and rationale

Our accordion design and guidelines are based on the best practice and research outlined by the DTA (Digital Transformation Agency, 2018, Accordions section). The only modifications to this design was to include the addition of open all and close all functionality.

Single action accordions

Accordion elements on some websites collapse any open panels when another one is opened. This behaviour can seem unpredictable for some users, which is why our accordion components don’t behave in that way.

We want to make sure that users have full control over what content remains visible to minimise any confusion when content suddenly ‘disappears’ from view.

Iconography

We use an up and down chevron icon to represent our collapsible element, rather than a plus or minus, or arrows alternative.

Plus, and minus icons can better describe different functionality. For example, adding a dependent child to a form. The arrows are more closely aligned to navigation.