Accordion UI design: choosing accordions, tabs or plain text
Use an accordion when a page holds many short, independent answers and most visitors need only one or two of them, such as an FAQ or a list of policies. If people need to compare items, use tabs or a table; if they need to read most of it, leave it open. On the web, the native details and summary elements give you an accordion with no script at all.
What an accordion is for
An accordion is a vertical stack of headings, each of which reveals a panel of content when activated. It trades visibility for scanability: the visitor sees every question at once and opens only the one they care about. That trade is worth making when the items are independent of each other and each answer is short. It's a poor trade when the hidden content is the main reason someone came, because every click to reveal it is a small cost, and some people never click.
The pattern moved onto the web from desktop software, where collapsible panels kept sidebars and settings windows manageable. On phones it became more common, since a long page of answers is tiring to scroll and a stack of questions fits on one screen.
Accordion, tabs or open text
| Situation | Best fit | Why |
|---|---|---|
| Ten questions, each with a two-line answer | Accordion | People scan the questions and open one or two |
| Three product views people switch between | Tabs | Short labels, one view at a time, quick switching |
| Specs people compare across products | Table | Comparison needs everything visible side by side |
| A process of four steps everyone follows | Open text | Hiding steps people must read only adds clicks |
| Long legal terms with many sections | Open text with a contents list | Find-in-page and printing work without surprises |
The accordion vs tabs question usually comes down to label length and count. Tabs need short labels and break down beyond about five; on a phone they turn into a horizontal scroller that hides some options. Accordion headings can be full questions and there can be many of them, and they work at any width.
Building it with details and summary
HTML has a built-in disclosure widget. The details element holds the content, and its first child, summary, is the visible heading that opens and closes it. As MDN's details reference describes, it toggles with a click or with the Space key when focused, the open attribute makes a panel start expanded, and giving several details elements the same name makes them exclusive, so opening one closes the others. That's a complete accordion with no JavaScript.
- Write the summary as the full question or label. It's the accessible name screen readers announce.
- Restyle the marker, don't remove the cue. Hiding the default triangle is fine if you replace it with a plus and minus or a chevron that changes with the
[open]state. - Make the whole summary row the target, at least 44px tall, so it's easy to tap. See touch target size.
- Keep focus visible on the summary when it's reached by keyboard.
- Leave headings outside if you need them in the outline. If each item should appear in the page's heading structure, put a heading inside the summary and check how your screen reader announces it.
When you need behaviour the native element can't give, such as a custom animation tied to state, the W3C's accordion pattern describes the scripted version: each header is a button inside a heading, with aria-expanded showing whether its panel is open and aria-controls pointing to the panel.
Design decisions that matter
- One open or many
- Allowing several open panels suits FAQs, where someone may want two answers at once. Exclusive panels suit step-like content, but closing what someone was reading can feel abrupt.
- Start open or closed
- Closed is the default. Open the first item only if most visitors need it.
- The indicator
- A plus that becomes a minus, or a chevron that rotates. Place it on the right, away from the start of the text, and keep it the same colour as the muted text, not the action colour.
- Motion
- A short height transition helps people see what changed. Turn it off under reduced-motion settings.
- Dividers
- A thin rule between items makes the rows easy to tell apart without boxing each one.
Where accordions go wrong
- Hiding prices, opening hours or delivery costs, the facts most visitors came for.
- Nesting accordions inside accordions, so people lose track of where they are.
- Using an accordion for two items. Just show them.
- Headings like "More info" that don't say what's inside.
- Making only the small icon clickable instead of the whole row.
Accordions in Anticode
Pages built by Anticode's design engine ship with no scripts, so their FAQ section uses native details and summary. Each question opens on its own, so a visitor can have several answers open at once, the indicator is a plus that turns into a minus, and each question row is at least 44px tall. The section takes its rules and type from whichever of the seven design systems the site uses. You can edit the questions and answers in place in the visual editor, and the guidance in FAQ section design covers what to put in them.
Questions people ask
Is details and summary accessible?
Yes. It's keyboard operable and announced as expandable by screen readers. Write the summary as a clear label and keep a visible focus style.
Do accordions hurt SEO?
Content inside a closed details element is still in the HTML. The bigger risk is hiding information visitors need, which affects whether the page answers their question.
Should an accordion allow more than one panel open?
For FAQs, usually yes. Exclusive panels suit content where only one item matters at a time.