Overview
Accordions provide a way to hide or expand large sections of content. Each accordion includes a heading and a text area. They're usually seen in groups.
Accordions can be helpful for saving space and reducing user overwhelm. However, they can also obscure important information.
To get the most out of your accordions:
- Use short and descriptive headings that are easy to compare to each other.
- Keep your accordion group relatively small. It should be simple to scan the headings as a list.
- Don't rely on accordions to format all of your page content. They are best paired with other components.
Usage
When to use
Accordions are best suited to:
- Content that is only relevant to a specific group of users.
- Scenarios where a user might choose one or two headings to expand while ignoring the other accordions. For example, a webpage about visiting a physical location might include separate accordions for parking, biking, ride share, transit, and walk-up visitors.
- A small collection of headings and related text. More than a handful of headings in a row can overwhelm the user.
Effective headings are critical, since users can't gather context clues from collapsed accordions.
When not to use
- Avoid using accordions to organize all of your content. Consider splitting content across multiple sections, pages, or views instead.
- Do not put critical information in an accordion.
- It can be harder for both humans and search engines to find text within an accordion. If your users should be able to find the text by searching online, use a text area instead.
Accessibility
Each accordion requires a heading. Verify that the heading hierarchy of the page is correct, including the accordion headings.