Skip to main content

Accordion

EXPERIMENTAL

This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.

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

Open this example in a new tab

When to use this component​

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

Accordions can work well for people who use a service regularly, for example users of caseworking systems who need to perform familiar tasks quickly.

When not to use this component​

Accordions hide content from users and not everyone will notice them or understand how they work. For this reason do not use an accordion for content which is essential to all users.

Test your content without an accordion first. Consider if it’s 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 use the accordion component if the amount of content it would need to contain will make the page slow to load.

Accordions work best for simple content and links. Do not use accordions to split up a series of questions into sections. Use separate pages instead.

Accordions, tabs and details​

Accordions, tabs and details all hide sections of content which a user can choose to reveal.

Consider using an accordion instead of tabs if users might need to view more than one section at a time.

You should also take into account the number of sections of content – accordions display vertically, so they can fit more sections than horizontal tabs.

Tabs may work better for users who need to switch quickly between 2 sections. Accordions push other sections down the page when they open, but tabs do not move which makes it easier to switch.

Consider using an accordion instead of the details component if there are multiple related sections of content. The details component might be better if you only have one or two sections of content. The details component is less visually prominent than an accordion, so tends to work better for content which is not as important to users.

How it works​

You can use HTML. The accordion component uses JavaScript. When JavaScript is not available, users will see all the content displayed with the section labels as headings.

Find out how your users interact with the content​

Users might need the sections they have opened to stay open if they leave and then return to the page. You can configure the accordion component to stay open.

Do user research to find out the best order for the sections.

Use clear labels​

Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.

Open this example in a new tab

If you struggle to come up with clear labels, it might be because the way you’ve separated the content is not clear.

Do not disable sections​

Disabling controls is normally confusing for users. If there is no content for a section, either remove the section or, if this would be confusing for your users, explain why there is no content when the section is opened.