Accordion vs. Tabs
Both hide sections until asked. Tabs sit in one horizontal row and show exactly one panel at a time. An accordion stacks sections vertically, handles long content and long labels, and can let several sections stay open at once — which tabs never do.
How to tell them apart
- Sections stacked vertically, each with a chevron or triangle → accordion.
- Labels in one row across the top → tabs.
- More than one section open at the same time → accordion.
- Labels too long for one row on a phone → you want an accordion.
The full entries — names, anatomy, paste-ready prompts
A reusable piece of interface with its own structure and behavior.
A named value for color, spacing, type, or another design decision.
Shared names make design and implementation prompts precise.
Accordion (Disclosure)web
<details>
Stacked sections whose headings expand and collapse their content
Weekly activity
1,248
+12% from last week
Tabsweb
role="tablist"
A single row of labels that switches one shared content region
Still a different pair on your mind? See every commonly confused pair