Accordion (UI)
A stack of headers that expand to reveal content, used to compress a long page into a scannable list of sections.
UI ComponentsAn 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
You may ask
Frequently Asked Questions
When should you use an accordion?
When a page has several independent sections and most people want one of them — FAQs, settings groups, product specs. Do not use one when readers need the whole content anyway; collapsing it just adds clicks.
Should accordions allow multiple panels open at once?
Usually yes. Single-open keeps the page compact but blocks comparison and closes a section the user was mid-way through reading. Reserve single-open for cases where panel length would make the page unusable.
Do accordions hurt SEO?
Content in a collapsed panel is normally crawled if it is present in the HTML, so it is indexable. The bigger practical cost is that people cannot find it with Ctrl+F, which affects long reference pages more than rankings.
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.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us