Accordion | Overview

An accordion is a vertically stacked list of headers that reveal or hide associated sections of content. Accordions 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, but they do hide content from users.

Overview

Anatomy

Accordion Anatomy

Divider: Denotes beginning of new content section.
Heading: Contains the section title and is control for revealing the panel.
Icon: Indicates if the panel is open or closed.
Panel: The section of content associated with an accordion header.

When to use

To organize related sets of information
To shorten pages and reduce scrolling when a page doesn't need to be read in full
When space is limited and long content can't be displayed all at once

When not to use

For content all users need to see
If the amount of content inside will make the page slow to load
When users will need to click through all accordion items to complete their tasks or goals

Best practices

Use short, descriptive titles

This will help users can find what they’re looking for quickly.

Use icons sparingly

If icons are used, they should provide additional clarity to users.

Related components

Tabs

Dropdown

Formatting

Alignment

Icon

By default the chevron icon is placed on the right side of the header. This allows for the title on the left side to align with other type elements in the layout, which is the preferred alignment scenario.

However, in some rare scenarios, the accordion may be modified to place the icon in front of the title to function more like a tree. Most instances should use the default right alignment. Icon placement in accordions should be consistent throughout your page and should not alternate.

Placement

Accordions can be placed with main page content or inside of a container such as a side panel or tile.

Content

Main elements

Title

The title should be as brief as possible while still being clear and descriptive.

Body copy

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

Scrolling content

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.

References

Accordions on Desktop: When and How to Use, Nielsen Norman Group

Accordions Are Not Always the Answer for Complex Content on Desktops, Nielsen Norman Group

U.S. Web Design System (USWDS)