Skip to main content

Accordion

The accordion component lets users show and hide sections of content on a page.

When to use​

Only use an accordion if there's evidence it's helpful for users to:

  • see an overview of multiple, related sections of content
  • show and hide those sections as needed
  • compare information that might otherwise be on different pages
  • find only the part of a long page that are relevant to them

Accordions can work well for people who use a service regularly. For example, those already familiar with most of the content in an accordion and only need to refer to individual sections.

When not to use​

Do not use an accordion for short content that can be set out on the page. An accordion must only be used when content needs to be divided into 4 sections or more.

Do not use accordions for content which is essential for all users. Accordions hide content and not everyone will notice them or understand how they work.

It might be better to:

  • simplify and reduce the amount of content
  • split the content across multiple pages
  • keep the content on a single page, separated by headings
  • use a list of links to let users navigate quickly to specific sections of content

Do not put accordions within accordions, as it will make content difficult to find.

Do not use the accordion component if the amount of content inside will make the page slow to load.

Use clear labels​

Accordions hide content, so the labels need to be clear and as concise as possible.

Standard​

The 'Show all' button allows users to show all content in each accordion. The button changes to "Hide all" when all the content is showing, which allows the user to hide all the collapsible content.

With summary text​

Write your accordion labels so that a user can understand what's inside, without having to open the accordion.

However, if you need to provide more information, you can add summary text. You should make the summary text as clear and concise as possible.

Challenges with recognition

Independently safe

Positive emotional wellbeing

No visual impairment

With additional show/hide all control​

If the accordion is long, you can add another button directly below it so that users don’t have to scroll up the page and lose their place.