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.

<Accordion titleElement="h3">
  <AccordionItem
    id="accordion-item-1"
    title="First item"
    data-testid="first-item"
  >
    <p data-testid="first-item-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, aut?
    </p>
  </AccordionItem>
  <AccordionItem
    defaultOpen
    id="accordion-item-2"
    title="Second item"
    data-testid="second-item"
  >
    <p data-testid="second-item-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, aut?
    </p>
  </AccordionItem>
  <AccordionItem
    defaultOpen
    id="accordion-item-3"
    title="Third item"
    data-testid="third-item"
  >
    <p data-testid="third-item-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, aut?
    </p>
  </AccordionItem>
</Accordion>

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.

<Grouped multipleOpen></Grouped>

Standalone accordion

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

<Grouped standalone multipleOpen></Grouped>

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.

<Grouped respondAt="md"></Grouped>

Copy guidelines

Make accordion titles concise and descriptive, and make sure it’s clear what content to expect when opened.

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.

Was this page helpful?