Accordion

Description

An accordion organizes content into sections that can expand or collapse. Accordions allow users to get the big picture before focusing on details, and they can reduce the length of a page making it easier for the user to navigate. They are best for FAQs, instructions, or content that doesn’t always need to be visible.

When writing content for a page, remember that headings must be descriptive so readers will be able to gauge whether they should open the accordion. Also keep in mind that accordions hide content from the user. Do not use an accordion for content that all users need to see.

Component Preview

Dos and Don’ts

Do

• Use when multiple sections of heavy text are required
• Use brief but descriptive headers that give an idea of the content in each accordion
• Content inside accordions can be split into paragraphs with sub-headers

Don’t

• Don’t use when there is little content on the page. Accordions will make the page look empty.
• Don’t use accordions inside of accordions.
• Do not use if you need to link to, bookmark, or share a specific section of content. Accordion panels can’t be linked to.