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

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.

  • Interactive demo - Sainsbury's

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.

  • Interactive demo - Sainsbury's

Standalone accordion

A standalone accordion is used to visually separate accordions that aren’t related.

  • Interactive demo - Sainsbury's

Responsive accordion

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.

  • Interactive demo - Sainsbury's

Copy 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.


What if there's a problem with my delivery?


What to do if there's a problem with your delivery...

Was this page helpful?

Get in touch

Our team can answer any questions about using accordions or give you a helping hand with your next project.
Select a theme to demo: