Accordions

An accordion is a series of expandable vertical panels, designed to save space on a page by hiding content and revealing it as required.

Usage One

Accordions can work well for people who use a service regularly, or who need to perform familiar tasks quickly.

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

When to avoid

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
use the Tab component 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.

Do not:

use the accordion if the amount of content it would need to contain will make the page slow to load
use accordions to split up a series of questions into sections. Use separate pages instead
use with very short content, use lists or paragraphs
use with very long content, use tabs or separate pages
add any other UI elements within the header
use where important information can be hidden and missed
use an accordion to shorten a page.

Collapse all/Expand all

The collapse all/expand all functionality allows users to perform the action to all accordions, reducing time and clicks to reach the required information. It can be removed or added as required.

This function should not be used to help users locate information within accordions. If a user is expanding multiple accordions because they are unsure of the content they contain, consider more descriptive titles or removing accordions all together and displaying the content separated by headings.

Principles

Use clear labels

Accordions hide content, so the labels need to be clear. Ensure the headings used are brief and explicit about what is contained in the hidden panel. Intuitive headings help the user build a clear mental model of the content.

Do not disable sections

Accordions can be set open or closed. They can be configured to only allow 1 panel to be open at a time. Do not use with only 1 panel allowed to be open at once, if people need to compare items in different panels.

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.

Consider tabs if the user would likely need to flick between content sections.

Accordion Lists

This is the first accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a efficitur enim. Mauris sed odio pulvinar, ultricies felis et, scelerisque diam. Mauris porta fermentum quam, a aliquet mi bibendum eu. Nam hendrerit elementum vestibulum. Etiam sem velit, faucibus vitae sollicitudin a, dignissim at nisl. In vel vulputate sapien, vel interdum leo. Phasellus vitae arcu mi. Etiam malesuada varius porttitor.

Donec est ligula, egestas ac orci eget, placerat porttitor neque. Nullam sit amet hendrerit arcu, varius venenatis metus. Etiam in mauris imperdiet, gravida metus in, venenatis turpis. Curabitur libero est, iaculis nec imperdiet sit amet, malesuada at odio. Nunc consectetur dolor sed euismod rutrum. In tristique ullamcorper mattis. Donec luctus arcu in est faucibus, ut egestas sapien iaculis. In viverra auctor gravida. Quisque quis eros scelerisque, semper nulla convallis, hendrerit leo. Donec scelerisque ipsum eget sapien cursus porta. Sed at sem mauris. Vestibulum sagittis tincidunt ornare. Cras quis leo rhoncus, convallis magna sed, facilisis metus. Sed fringilla arcu non metus posuere, ut posuere quam sodales. Integer efficitur volutpat mi, eget luctus quam mollis sit amet. Cras lacinia nulla nulla, a ultrices augue pulvinar ut.

This is a second accordion

This is a third accordion

Updated 31 July 2023