Accordion
An accordion shows the user a small amount of content and gives them the option to reveal more content by expanding the accordion.
How to use an accordion
When using accordions:
- Group accordions with related information together to help users scan the content, for example in frequently asked questions sections
- Hide additional information that isn’t needed at that moment for a user to complete their task. For example, hide the billing address when the user is completing the delivery address
- Make sure hidden content in a collapsed accordion cannot be accessed by screen reader and keyboard users is this here
Accordion Item 1
Accordion Item 2
Accordion Item 3
Don’t use an accordion if there isn’t enough content to condense.
Types of accordion
Grouped accordion
A grouped accordion helps users quickly understand related information.
You can set the accordion to be open by default if you want users to see the content, but also give the flexibility to hide it.
Content in collapsed accordions is visually hidden and cannot be tabbed to or read out by keyboard and screen reader users.
You can link the state of grouped accordions so that when the user opens one, the accordion that’s currently open is collapsed.
Don’t restrict the number of open sections if users need to compare the content.
Accordion with footer
Content guidelines
Make accordion titles concise and descriptive, and make sure it’s clear what content to expect when opened.
Full product details
More information
Start titles with a capital letter. You can end titles with a question mark (for example if you’re creating an FAQ), but don’t end them with commas, semicolons or full stops.