Accordions from the Kombai gallery: a resale shop's product details, a payments app's help topics and a car-rental FAQ.
What is an accordion?
An accordion is a vertical list of headers, each hiding a panel of content. Selecting a header expands its panel in place and pushes the rest of the list down; selecting it again collapses it. People see every section title at once and open only what they need.
- Headers stay visible and carry a chevron or plus icon that shows the open state.
- Panels open in place, without leaving the page or covering other content.
Accordions show up across product detail, help and support, pricing and settings screens.
When to use an accordion
- Long, skimmable contentFAQs, specs and policies where most people need one or two sections.
- Small screensMobile pages that would otherwise scroll for screens of detail.
- Optional detailAdvanced settings or fine print that most people can skip.
When not to use one
- Content everyone needsDon't hide the main information. Show it on the page.
- Comparing sectionsIf people read sections side by side, use tabs or a table.
- Only one or two sectionsA single collapsed block adds a click for nothing. Show the text.
Anatomy of an accordion
This one works. Open a section, or tab to a header and press Enter.
Straight-leg jeans in washed ivory denim, with a five-pocket cut and a brushed-nickel button.
Cotton denim. Wash cold, inside out, and hang to dry.
Ships in two days. Free returns within 30 days.
- Closed
- Open
- Keyboard focus
- HeaderThe always-visible title
- IconChevron or plus, shows state
- PanelContent revealed on open
- DividerSeparates the sections
- StatesClosed, open, focus
Accordion variants
We sorted every accordion design in the Kombai gallery and found five patterns. Browse all 50 web and 30 mobile designs.
1. Chevron rows
The default. Plain rows with a chevron that flips when the section opens, often with one section open at a time.
2. Plus toggles
A plus that turns into a minus. Common on FAQ cards and course outlines, where the icon reads as "more".
3. Numbered sections
Sections numbered in order, used for specs, setup steps and wizards people work through top to bottom.
4. Accordions that hold a choice
Each section is an option, like a payment method or a product finish, and opening it reveals the fields for that option.
5. Collapsible groups
Lists of channels, topics or offers grouped under headers that fold away, so a long list stays scannable.
Where accordions show up
Product pages
Description, materials, delivery and returns folded under headers below the buy button.
Filters
Each filter group opens on its own in a drawer or sheet, so a long filter list fits one panel.
Forms and settings
Advanced options and consent details kept closed until someone wants them.
Accordion vs similar components
Build notes
- Make each header a <button> with aria-expanded, inside a heading element.
- Point aria-controls at the panel, and give the panel an id.
- Enter and Space toggle a section. Every header sits in the tab order.
- Use the native <details> and <summary> elements when you need no custom behavior.
- Animate the height briefly, and skip the animation under prefers-reduced-motion.
- Don't collapse content people search for with Find. Keep hidden text in the DOM.
FAQ
Should only one accordion section be open at a time?
Usually not. Letting people open several sections lets them compare answers and keeps their place. Close other sections automatically only when the panels are long and screen space is tight, like on mobile.
Chevron or plus icon?
Both work. Chevrons are the more common default and read as "open this". A plus that turns into a minus suits FAQ cards and outlines. Pick one, put it on the same side of every header and rotate or swap it to show the state.
Should the first section start open?
Open the first section when most people need it, like the description on a product page. Leave everything closed when sections are equally likely, like an FAQ, so people can scan the questions first.
Do accordions hurt SEO?
Not when the hidden text stays in the HTML. Search engines index content inside collapsed panels. Problems start only when panels load their content after a click.
Related terms
All glossary terms · Browse 50 web and 30 mobile accordion designs