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.

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 types to accommodate space availability on the page or within a Card: contained and separated.

Contained

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

Separated

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