Skip to main content


The accordion element delivers large amounts of content in a small space through progressive disclosure.

Accordions Example


Accordions are containers that expand to reveal content progressively to limit the amount of information on the page or in a section to reduce clutter. The content can be expanded and collapsed based on the user’s interest.


Use when

  • Some content can be hidden because it is not critical to the user’s task.
  • You want to declutter the interface or shorten pages to reduce scrolling when content is not crucial to read in full.
  • You want to simplify a complex process.
  • There are options dependent upon a prior selection.
  • All options and information are not critical to see at first.
  • Allowing users to hide controls and content, so they can better focus on their task.

Don’t use when

  • Providing an introductory element to a set of content which doesn’t need an expand and collapse functionality. Instead, use a Top Navbar.
  • Hiding critical content solely to clean up the interface.
  • Hiding an action if the user can easily do it without additional input.
  • Hiding primary actions on the page.
  • Revealing content that is not contextually relevant to the user.
  • Nesting too many layers. In other words, don’t place accordions within accordions.
  • Creating a set of visibly contained content, which doesn’t need an expand-and-collapse functionality. Instead, use a Card.


Accordions come in two types to accommodate space availability on the page or within a Card: contained and separated.


Use a contained accordion for most cases. Separate its items with a divider. This placement saves some vertical space.

Contained Accordion


There are some cases, when you can separate accordions with white space. Use this method, when you have available space.

Separated Accordion

What's changed
Date Version Notes Contributors
01/16/2023 1.0.0 New component added. D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, I. Perez, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati