Accordion

Accordions are a vertical list of interactive headers. Users open them to reveal content or close them to hide content.

How they function

They’re closed by default. This collapses the page, making it easier for users to scroll.

Users can open one accordion or several at a time.

When to use them

There are only a few cases when you should use accordions. Either you have Frequently Asked Questions (FAQs) or you want to group two to seven related topics.

In these cases, accordions help users scan the page and find what they want.

When not to use them

Research shows that misused accordions can harm usability. So, do not use them for:

• Short pages
• Timely or actionable content
• Step-by-step instructions (use the process list instead)
• Complex, interactive elements like forms
• Layouts with two or more columns
• Images, charts, tables, videos, and other media 

Follow these rules

Headings

• Keep them to 160 characters or fewer.
• Make them short, clear, and descriptive.
• Select the correct level based on page location (H2, H3, H4, or DIV).

Content and functionality

• Use no more than three short paragraphs in each accordion.
• Link directly to an accordion from another page (each has a unique ID).

Type

• Use multi-select to show and compare information within different accordions.
• Choose single-select when users do not need to open two or more accordions at once.

Examples

Single-select accordions

Allows users to open and close one accordion at a time.