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 component does not behave in that way.

The intent is to make sure that users have full control over what content remains visible to minimise possible confusion when content suddenly ‘disappears’ from view.

Iconography

We settled on an up and down chevron icon, to represent our collapsible element, as opposed to a plus or minus, or arrows alternative.

This decision was made because the plus and minus could possibly indicate, and better describe, different functionality; for example, adding a dependant child to a form. While the arrows seemed more closely related to navigation.

When to use accordions

We recommend that accordions be used sparingly for primary content on a page. While they can be appropriate for organising small, specific sections of content, accordions are not a suitable replacement for well formatted plain text. If a user requires all, or most of the information on the page it should be visible, not hidden inside an accordion.

Before using an accordion, consider whether the benefits outweigh the negative usability impacts:

Hiding content makes it harder for a user to scan a webpage. If content is hidden inside an accordion it can be difficult for a user to scan a whole web page for content relevant to them. Web browsers' 'Find on page…' search functions do not detect content hidden by accordions, making it harder for users to use their existing tools and behaviours to locate text.

Accordions increase cognitive load. Forcing a user to click on each accordion to receive the full text fragments their user experience, causing them to switch focus between accordions in order to gather all the information. It is also possible that with hidden content, a user might ignore, or not see important information.