An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.


The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.

Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.

When to Use

  • To organize related information.
  • To shorten pages and reduce scrolling when content is not crucial to read in full.
  • When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.



Accordion anatomy diagram
  1. Header: contains the section title and is control for revealing the panel.
  2. Icon: indicates if the panel is open or closed.
  3. Panel: the section of content associated with an accordion header.


Main Elements

  • The title should be as brief as possible while still being clear and descriptive.
  • Each title should be wrapped in a role heading (h2-h6) that is appropriate for the information architecture of the page.
  • Content inside of a section may be split into paragraphs and include sub-headers if needed.

Scrolling Content

When the accordion content is longer than the viewport, the whole accordion should vertically scroll. Content should not scroll inside of an individual panel. Content should never scroll horizontally in an accordion.



The accordion component has two main states: collapsed and expanded. The chevron icon at the end of the accordion indicates which state the accordion is in. The chevron points down to indicate collapsed and up to indicate expanded.

Accordions begin by default in the collapsed state with all content panels closed. Starting in a collapsed state gives the user a high level overview of the available information.

Accordion anatomy diagram

A user can then independently expand each section of the accordion allowing for multiple sections to be open at once.

Accordion anatomy diagram

In addition to the collapsed and expanded states, accordions also have interactive states for hover and focus.

Accordion anatomy diagram



Users can trigger a state change by clicking on the chevron or clicking anywhere in the header area.

Accordion mouse interaction diagram


Users can navigate between accordion headers by pressing Tab or Shift-Tab. Users can trigger a state change by pressing Enter or Space while the header area has focus.