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 plate
Reach for this when
- Optional detail such as FAQs.
- Long reference content users dip into.
- Reducing length on mobile.
Common mistakes
- Required content hidden inside.
- Vague headings.
- Icon-only triggers.
- No deep linking.
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.
When an accordion helps
Do
- Use it for content that is genuinely optional to read, such as detailed FAQs.
- Let more than one section be open where readers may need to compare.
- Write headings that describe the content, so the closed state is still informative.
- Keep the trigger a button, with its expanded state announced.
Do not
- Hide content the reader needs to complete the task.
- Collapse a section containing a validation error.
- Accordion a page to make it look shorter while leaving the reading the same length.
- Animate the expansion so slowly that scanning several sections becomes tedious.
In practice
- i.
The answer nobody found
Hidden from searchCollapsed content is invisible to in-page find on many implementations, and a reader searching for a term they know is in the page concludes it is not. Where find matters, the content should be open by default or searchable while closed.
- ii.
Six sections, all opened
When it was the wrong controlIf readers open every section every time, the accordion is adding one interaction per section and hiding nothing useful. A plain page with good headings serves them better.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Tabs
ComponentMutually exclusive panels sharing one region, switched by a row of labels.
Key difference
Tabs show exactly one panel at a time in a fixed region. An accordion can hold several sections open at once and grows the page as it does. Tabs promise parallel alternatives; an accordion promises a long document you can collapse.
Use Accordion when
- The sections are parts of one long document, not alternatives.
- Readers want two sections open side by side.
- The list is long or the labels are too wordy for a tab row.
Use Tabs when
- The panels are genuine alternatives, viewed one at a time.
- There are few enough labels to sit on one row on a phone.
- Nothing inside one panel needs comparing with another.
Local chart
CMP·017 · Region III · Grid E1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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 DesignHEUR·008 · Heuristic
- Progressive DisclosurePRIN·003 · Principle
Depends on
Get these right first, or this one will not hold.
- Heading StructureA11Y·006 · Accessibility
- Keyboard NavigationA11Y·002 · Accessibility
Short definition
The one-paragraph version, for when that is all you need.
- Progressive DisclosureTERM·016 · Term