Accordion

The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.

Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.

• To organize related information.
• To shorten pages and reduce scrolling when content is not crucial to read in full.
• When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.

1. Header: contains the section title and is control for revealing the panel.
2. Icon: indicates if the panel is open or closed.
3. Panel: the section of content associated with an accordion header.

• The title should be as brief as possible while still being clear and descriptive.
• Each title should be wrapped in a role heading (h2-h6) that is appropriate for the information architecture of the page.

• Content inside of a section may be split into paragraphs and include sub-headers if needed.

When the accordion content is longer than the viewport, the whole accordion should vertically scroll. Content should not scroll inside of an individual panel. Content should never scroll horizontally in an accordion.