Tabs vs accordion
Tabs show one panel at a time and hide the rest completely. An accordion keeps every section in the page flow and lets several stay open together. Ask whether two sections are ever worth reading side by side, and the choice is made.
The rule
Both collapse content until someone asks for it, and that's where the similarity ends. Tabs show exactly one panel and remove the rest from the page entirely, which is fast to switch between but makes comparing two panels impossible without leaving one. An accordion keeps every section in the page's flow, closed or open, so several can sit open at once and the reader decides how many. Ask whether two sections are ever worth reading against each other. If they are, that's an accordion's job. If nobody would ever want two open at the same time, tabs do the same hiding faster.
Side by side
| Tabs | Accordion | |
|---|---|---|
| Panels visible at once | One | Any number, reader's choice |
| Rest of the content | Unmounted or hidden, out of the flow | Hidden but present, pushes the page down when opened |
| Best for | Peers someone picks between, like Overview and Reviews | Sections read in sequence, like an FAQ |
| Narrow screens | Wraps or scrolls past about 7 labels | Stacks cleanly at any width |
| Keyboard model | One tab stop for the whole strip, arrow keys move between triggers | Every trigger is its own tab stop |
| Typical count | 2 to 7 panels | Works past 15 |
Stripe's dashboard switches between settings sections with tabs, since each one is a peer nobody needs open next to another. The GOV.UK Design System defaults long guidance pages to an accordion with a "Show all sections" control, because most visitors are hunting for one answer out of many rather than reading start to finish.
Use tabs when
- The panels are peers, like Overview, Specs and Reviews on one product
- Only one panel needs attention at a time
- There are roughly 2 to 7 panels, few enough to sit in one row without wrapping
- Switching panels should feel instant, with no page reload
Use an accordion when
- The page is long enough that scanning headings first saves real scrolling
- Each section is optional reading, like an FAQ, a spec sheet or advanced settings
- Someone may want two or three sections open at the same time
- The sections belong in one sequence rather than being alternatives
Where people get it wrong
The most common miss sends a linear flow through tabs. Checkout steps aren't peers, they're a sequence, and a tab strip implies any of them can be opened in any order. That's a stepper's job, not either component here.
The reverse happens on pages that don't need hiding at all. Four short sections that would have fit on screen uncollapsed turn into four clicks once someone reaches for an accordion out of habit, when plain headings would have cost nothing.
Mobile is where the wrong pick shows up fastest. A five-label tab strip that fits fine on desktop starts truncating or scrolling on a phone, while the same five sections stacked as an accordion read cleanly at any width.
The side-by-side test still decides it. If two sections are ever worth reading against each other, that's tabs failing at the one job an accordion does for free. If nobody would ever want two open at once, an accordion's extra clicks are buying nothing tabs wouldn't give faster.
Last reviewed 30 JUL 2026