Accordions

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

Accordions Example

Overview

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. Accordion (aka Expansion panel) — is a vertically stacked, full-width, list of options that can expand/collapse to reveal or hide more associated content.

Usage

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.

Types

Accordions come in two sizes to accommodate space availability on the page or within a Card. Default size should be used when accordions display directly in the main content container on the page. Compact size is useful, when the accordion displays within a smaller container (e.g. card) or smaller section of the page.

What's Changed
DateVersionNotesContributors
01/16/20231.0.0New component added.D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati