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
Don’t use an accordion if there isn’t enough content to condense.
Types of 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.
A standalone accordion is used to visually separate accordions that aren’t related.
You can tie the accordion view to a particular breakpoint. The accordion will revert to the default display once the specified screen width has been reached.
This can be useful to condense content on smaller screens without hiding anything for desktop users.
Make accordion titles concise and descriptive, and make sure it’s clear what content to expect when opened.
Full product details
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.