Accordions

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

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.

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 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.

Default

Collapsible group item #1
Anim cliche, high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nets serpent ea president. Ad vegan except butcher vice lemons. Leggings course craft beer farm-to-table, raw denim aesthetic synth braking you probably haven't heard of them accuse abort sustainable VHS.
Anim cliche, high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nets serpent ea president. Ad vegan except butcher vice lemons. Leggings course craft beer farm-to-table, raw denim aesthetic synth braking you probably haven't heard of them accuse abort sustainable VHS.
Anim cliche, high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nets serpent ea president. Ad vegan except butcher vice lemons. Leggings course craft beer farm-to-table, raw denim aesthetic synth braking you probably haven't heard of them accuse abort sustainable VHS.

Compact

Collapsible group item #1
Anim cliche, high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nets serpent ea president. Ad vegan except butcher vice lemons. Leggings course craft beer farm-to-table, raw denim aesthetic synth braking you probably haven't heard of them accuse abort sustainable VHS.
Anim cliche, high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nets serpent ea president. Ad vegan except butcher vice lemons. Leggings course craft beer farm-to-table, raw denim aesthetic synth braking you probably haven't heard of them accuse abort sustainable VHS.
Anim cliche, high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nets serpent ea president. Ad vegan except butcher vice lemons. Leggings course craft beer farm-to-table, raw denim aesthetic synth braking you probably haven't heard of them accuse abort sustainable VHS.
What's changed
DateVersionNotesContributors
11/23/20201.0.0Spacing and typography adjustments.E. Gunther