ui patterns
Accordion
What is an accordion?
An accordion is a stack of headed panels that open and close on click, folding long content into a scannable list of titles you can expand as needed. This very demo is one - the panels below are the pattern.
Also known as: collapsible panel, disclosure widget
Prefer to watch?
Watch the recap 0:33
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.
An accordion collapses long content into headed panels that open on demand, trading a short, scannable list for the clicks needed to reach what’s inside. Use it when people only need one or two sections at a time, not when they’d want to scan everything at once.
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.
Accordion UX turns dense content into scannable, expandable sections - try the live demo here to see how it works. When users only need one or two sections at a time, accordion UX reduces visual clutter without sacrificing access.
Accordion UX turns long content into scannable sections you can open on demand - try the interactive demo to see it in action. It’s ideal when users only need one or two sections at a time, not when they’re scanning everything at once.
On site:uxbyexample.co.uk, you can interact with the accordion demo to see how it collapses content - and why it’s best for focused, not full, browsing. This hands-on demo lets you test the trade-off: scannable headings vs. Click-throughs to reach content - exactly how it works in real interfaces.
Test the accordion pattern live on site:uxbyexample.co.uk - this page’s demo lets you expand and collapse panels to see how it works. The hands-on demo here shows how accordions trade full content for scannable headings - ideal when users need only one or two sections at a time.
You can see and interact with this accordion pattern live on site:uxbyexample.co.uk - it’s built to let you test how users engage with collapsible content. It’s designed for moments when users need only one or two sections at a time - not when they’re scanning everything.
This page’s live demo lets you interact with the accordion pattern - open and close panels to see how it works in real time. Use accordions when users need to access one or two sections at a time, not when they’re scanning for all options - this demo shows that dynamic control. When you’re designing, test the accordion here - it’s not just a visual pattern, it’s an interactive experience you can adjust on the spot.
Try this accordion UX pattern live on this page - it’s an interactive example you can operate right now. It’s best when users only need one or two sections at a time, not when they’d scan everything at once.