Accordion (UI)
A stack of headers that expand to reveal content, used to compress a long page into a scannable list of sections.
An accordion trades reading for scanning. Collapsed, it gives an overview of everything available in a screen's worth of headers; expanded, it shows one section at a time. That trade pays off when most users want one section and nobody wants all of them — FAQs, specification groups, settings categories. It costs you when people need to read the whole thing anyway, because then you have made them click eight times to read a page that was fine as a page.
The headers carry the entire weight. “More information” collapsed tells nobody whether their answer is inside, so they open everything and you have shipped a worse page. Write headers as the question or the noun people are looking for. Then decide whether opening one closes the others: single-open keeps the page short, multi-open lets people compare. Multi-open is right more often than the classic accordion metaphor suggests.
Accordions and search
Content inside a collapsed panel is in the DOM and generally indexed, but it is invisible to Ctrl+F in most implementations, and that is what people actually use. If a section must be findable on the page, either leave it expanded by default or handle browser find yourself.
In practice
A healthcare booking site collapsed its insurance-coverage details into an accordion to shorten the page. Calls asking “do you take my plan” went up. The headers read “Coverage”, “Eligibility”, “Other” — none of which contained an insurer's name. Renaming the headers to the insurer names, with nothing else changed, removed the calls.
Where teams get it wrong
- Vague headers. If the header does not say what is inside, people open all of them.
- Collapsing content that everybody needs, which converts one scroll into eight clicks.
- Hiding the thing the page should rank for inside a panel that is closed by default.
- Chevrons that do not change on expand, so there is no signal of state.
- Animating the height of long panels, which makes the page jump under the cursor.
( Learn more )
Related terms
All terms- Tabs (UI)A row of labels that switch between alternative views of the same object, showing one panel at a time.
- Information ArchitectureThe structure of a product's content and navigation — how things are grouped, labelled and related so people can find what they need.
- Empty StateWhat a screen shows when it has no content yet — the first screen every new account sees, and usually the last one anybody designs.
- Sidebar NavigationA vertical navigation column that scales to real product structure — grouping, nesting and staying visible while you work.