ui patterns
Tabs vs accordion
Tabs or accordion - which should you use?
Both hide sections of content behind labels you click to reveal - but tabs lay the labels in a row and show one panel at a time, while an accordion stacks them vertically and lets panels open in place. The choice is mostly about how many sections there are and how wide the screen is.
Also known as: accordion vs tabs, tabs or accordion
The demo
The same four sections, two containers. Switch between tabs and accordion and feel which suits the content - and imagine the screen getting narrower, or the sections multiplying.
Switch the container and notice how the same content changes character.
What this demo shows (text version)
Four content sections - Overview, Pricing, Reviews, FAQ - shown either as tabs (a horizontal row of labels with one panel visible at a time) or as an accordion (a vertical stack of headers that expand in place). The content is identical; only the container changes.
Tabs suit a small set of peer sections you switch between, especially on wider screens. The accordion suits many sections, independent sections, or narrow screens where a row of tabs would not fit. Switching between the two shows that the better choice depends on how many sections there are and how much width you have, not on the content itself.
Flip the same four sections between the two and the rule of thumb appears on its own: tabs feel right for a few peer sections you switch between; the accordion feels right when there are many, or when the screen is narrow and a row of tabs would never fit. Same content, and the better container depends entirely on shape and quantity.
Reach for tabs when you have a small, stable set of peer sections (think three to five) and people switch between them - and especially on wider screens where a horizontal row fits comfortably. Tabs keep everything one click away and signal "these are alternatives". They fall apart the moment the labels would wrap to a second row.
Reach for the accordion when there are many sections, when they are independent rather than alternatives, or when you are tight on width - it scales down a long page and reads naturally on mobile. Its cost is scrolling and the temptation to bury everything; if a visitor needs to open six panels to compare them, neither pattern is the answer - just show the content.