ui patterns
Accordion
An accordion is a stack of headed panels that each open and close on click, collapsing long content down to a list of titles you can expand on demand. This very demo is one - the panels below are the pattern.
The demo
These panels are the demo. Open a few. Then switch the behaviour to "one at a time" and watch opening one close the last.
What an accordion is good at
Turning a long page into a short list of titles. People scan the headings, open the one or two that concern them, and skip the rest. Less to read at a glance, less to scroll.
Where it costs you
Every panel is a click, and collapsed content is easy to miss entirely. If most people need most of the content, the accordion just added work - they'd have been better served by a plain page.
Accordion or tabs?
Tabs show exactly one panel and suit a handful of parallel views. Accordions can show several at once (in "independent" mode) and suit a longer list where any number might be relevant. On narrow screens, accordions usually win - tabs run out of room.
What this demo shows (text version)
The demo is an accordion: three headed panels that each expand and collapse when you activate their title. It works with the keyboard and without JavaScript, because it's built from the browser's native disclosure element.
A control switches between two behaviours. In "independent" mode any number of panels can be open together. In "one at a time" mode opening a panel closes whichever was open before, so you only ever see one. The accordion suits content where people want one or two items from a longer list, and works against you when they need most of it anyway - then each collapsed panel is just a click between the reader and the page.
You just ran an accordion to learn what an accordion is. Each title you opened showed its panel; switch on "one at a time" and opening the next quietly closes the last. That trade - a short, scannable list of titles against the clicks and the hidden content - is the whole pattern in your hands.
An accordion earns its keep when the panels are independent and people only want one or two: an FAQ, a settings page, a spec sheet. It works against you when readers need most of the content anyway - then every panel is a click they'd have skipped on a plain page, and your "tidy" layout is just friction wearing a bow.
My rule: don't put anything in an accordion that you'd be upset to learn people never opened. Collapsed content is, for most visitors, invisible content. If it matters, it goes on the page; if it's reference for the few who go looking, an accordion is the right home.