An accordion (or accordion menu) is a grouped set of collapsible panels that provides access to a large number of links or other selectable items in a constrained space.
Each inlaid panel may be individually expanded (usually leaving the rest collapsed), generally by hovering on or clicking the title of (or an expand/collapse element on) the specific panel, to display a single subset of the options.
What Problem Does This Solve?
When there are too many items to fit into a limited space or when the number of items, if displayed all at once, would overwhelm the user, then the question is how to give the user access to all of the items in digestible chunks and without requiring scrolling, which can remove the user from the context or page position they may prefer.
When to Use This Pattern
Use when the number of options is large, the space is constrained, and the list of items can be logically grouped into smaller, roughly equal sized chunks.
What's the Solution?
Present a two-tiered set of options.
- The top level is categories or groupings.
- The secondary level is the list of options that fall into each group.
Accordions are typically styled as a stack of collapsible panels (and not with the look of hierarchical trees) with the top-level category items used as labels. The category labels may function as full-width handles or may be provided with a consistent expand/collapse icon.
An accordion may have one panel open by default on initial display.
- Have the most important panel open by default, both to expose the important choices and to demonstrate the fact that each collapsed list can be individually opened.
- Highlight the current panel so the user can distinguish open panel headers from closed panel headers.
- Avoid nesting accordions inside of other accordions. If you find yourself needing to do this, consider whether a tree control or other element better suited to multiple-level hierarchies would be more appropriate.
- Accordions may be configured to require that there is always a single panel open or to allow for more flexible possibilities (all panels closed, multiple panels open). Some practitioners consider it a best practice to permit only one panel to be open at a time, but others disagree.
- An accordion may be configured so that only one panel can be open at a time, but many examples of accordions allow for multiple panels to be open at once.
- Unless the form factor or other unchangeable design constraints require that the accordion as a whole maintain a consistent size, the accordion element should be able to change size to accommodate different sized panels when open.
- In most cases, require a click to open a panel in an accordion, but in contexts where an element of "delight" / interesting / hey-check-this-out is in play, it may be acceptable to have panels open on hover.
Why Use This Pattern?
The primary reason to use an accordion element is to compress a large amount of options into a limited space.
Most accordions are stacked vertically, but they may also be laid out horizontally.
For keyboard users an accordion usually ends up behaving either as a tree view or as a tab view. It may be possible to add keyboard navigation to the accordion with tabbing between labels and down/up arrows switching between the panels.
An accordion should degrade into something useful when Javacript is off, perhaps opening all panels.
Display none shouldn’t be used as this might hide the content from a screen reader. Instead consider setting a height of 0.