Accordion

Accordions are vertically stacked lists of headings that allow the user to hide or reveal content. They allow users to get a high-level overview of content to help them decide what information they want to explore further.

Use when:

• There’s a lot of content on the page and scrolling must be reduced because there’s not enough room (for example, on a mobile device)
• Organizing related information into smaller groups
• Giving users added control over how they view content on a page

Don’t use when:

• There’s not enough content to warrant the use of accordions or it doesn’t make sense to hide the content from all users
• The user needs to see all or most of the information on the page