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 whitespace. Use this method, when you have available space.
