Accordions

• Usage
• Styles
• Accessibility

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.