Accordions

An accordion is a list of headers that hide or reveal additional content when selected.

When to use the accordion component 

  • If you have only a small space to display a lot of content.
  • If the content within the accordion item might not be necessary to all users.
  • If you can summarize the content within in approximately one line of text for the heading.

When to consider something else

  • If users need to see most or all of the information on a page. Use well-formatted text instead.
  • If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.

View USWDS Accordion guidelines

Example accordion

The Accordion item "Body" field is a text editor, so it can accommodate text, heading structures, images and other media.

The first Accordion will default to being open and showing the content. It can also be collapsed.

Give your accordion a meaningful headline so users know what to expect when they expand it!

A group of penguins stand in the foreground on a rocky surface. A scientist with a blue coat stands behind them looking through a pair of binoculars
Credit: Peter Rejcek
Scientist Scott Jennings uses binoculars to find specific Adélie penguins at Cape Crozier, where scientists have been conducting a long-term ecological study on one of the world's largest Adélie penguin colonies

Top