Accordion
Collapsible sections that shorten a page, at the cost of hiding content from scanning and from search.
Definition
An accordion is a set of headings that expand to reveal content. It reduces page length and lets users select what to read, while making the hidden content harder to find.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Rules
- Headings must describe the content well enough that users can decide without expanding.
- The whole heading row is the trigger, not just an icon.
- Use a button inside a heading element, with aria-expanded, so the structure is navigable.
- Allow multiple sections open unless there is a specific reason not to.
- Support deep linking to an expanded section, and expand automatically when the browser's find-in-page needs it. The hidden-until-found attribute handles this where supported.
- Never hide critical or required content behind a collapsed section.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Aesthetic and Minimalist DesignHeuristic
- Progressive DisclosurePrinciple
Depends on
Get these right first, or this one will not hold.
- Heading StructureAccessibility
- Keyboard NavigationAccessibility
Alternative approach
A different answer to the same problem, with a different cost.
- TabsComponent
Tabs show one of several. An accordion can show several at once, and stacks on narrow screens.