--- title: "Accordion UI: anatomy, variants and examples | Kombai" description: "An accordion stacks sections under headers that open and close, so long content fits in a short space." canonical_url: https://kombai.com/glossary/accordion/ author: "The Kombai Team" --- # Accordion An accordion stacks sections under headers that open and close, so long content fits in a short space. - Also called: collapsible, expandable - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/accordion/), [30 mobile designs](https://kombai.com/gallery/mobile/accordion/) - [Selenite](https://kombai.com/gallery/inspirations/accordion-ios-5/) (Mobile) - [Contour](https://kombai.com/gallery/inspirations/accordion-ios-12/) (Mobile) - [Sterling](https://kombai.com/gallery/inspirations/accordion-web-15/) (Web) ## 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. ## When to use accordion - **Long, skimmable content.** FAQs, specs and policies where most people need one or two sections. - **Small screens.** Mobile pages that would otherwise scroll for screens of detail. - **Optional detail.** Advanced settings or fine print that most people can skip. ## When not to use one - **Content everyone needs.** Don't hide the main information. Show it on the page. - **Comparing sections.** If people read sections side by side, use tabs or a table. - **Only one or two sections.** A single collapsed block adds a click for nothing. Show the text. ## Anatomy 1. **Header**: The always-visible title 2. **Icon**: Chevron or plus, shows state 3. **Panel**: Content revealed on open 4. **Divider**: Separates the sections 5. **States**: Closed, open, focus ## Variants We sorted every accordion design in the Kombai gallery and found five patterns. ### 1. Chevron rows The default. Plain rows with a chevron that flips when the section opens, often with one section open at a time. - [Isobar](https://kombai.com/gallery/inspirations/accordion-ios-8/) (Mobile) - [Verdigris](https://kombai.com/gallery/inspirations/accordion-ios-1/) (Mobile) - [Halyard](https://kombai.com/gallery/inspirations/accordion-web-14/) (Web) ### 2. Plus toggles A plus that turns into a minus. Common on FAQ cards and course outlines, where the icon reads as "more". - [Mainspring](https://kombai.com/gallery/inspirations/accordion-ios-17/) (Mobile) - [Repeater](https://kombai.com/gallery/inspirations/accordion-ios-19/) (Mobile) - [Pavilion](https://kombai.com/gallery/inspirations/accordion-web-34/) (Web) ### 3. Numbered sections Sections numbered in order, used for specs, setup steps and wizards people work through top to bottom. - [Sorrel](https://kombai.com/gallery/inspirations/accordion-ios-21/) (Mobile) - [Plinth](https://kombai.com/gallery/inspirations/accordion-web-44/) (Web) - [Selvedge Supply Co.](https://kombai.com/gallery/inspirations/accordion-web-19/) (Web) ### 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. - [Celadon](https://kombai.com/gallery/inspirations/accordion-web-47/) (Web) - [Escapement](https://kombai.com/gallery/inspirations/accordion-ios-16/) (Mobile) - [Cartouche](https://kombai.com/gallery/inspirations/accordion-ios-15/) (Mobile) ### 5. Collapsible groups Lists of channels, topics or offers grouped under headers that fold away, so a long list stays scannable. - [Baseline](https://kombai.com/gallery/inspirations/accordion-ios-27/) (Mobile) - [Petrichor](https://kombai.com/gallery/inspirations/accordion-ios-6/) (Mobile) - [Yarrow](https://kombai.com/gallery/inspirations/accordion-ios-24/) (Mobile) ## Where accordions show up ### Product pages Description, materials, delivery and returns folded under headers below the buy button. - [Bramble](https://kombai.com/gallery/inspirations/accordion-ios-23/) (Mobile) - [Downdraft](https://kombai.com/gallery/inspirations/accordion-ios-10/) (Mobile) - [Tramontane](https://kombai.com/gallery/inspirations/accordion-web-45/) (Web) ### Filters Each filter group opens on its own in a drawer or sheet, so a long filter list fits one panel. - [Deckle](https://kombai.com/gallery/inspirations/accordion-web-23/) (Web) - [Bismuth](https://kombai.com/gallery/inspirations/accordion-web-16/) (Web) - [Colophon](https://kombai.com/gallery/inspirations/accordion-ios-26/) (Mobile) ### Forms and settings Advanced options and consent details kept closed until someone wants them. - [Ligature](https://kombai.com/gallery/inspirations/accordion-web-6/) (Web) - [Sirocco Console](https://kombai.com/gallery/inspirations/accordion-web-4/) (Web) - [Quire](https://kombai.com/gallery/inspirations/accordion-ios-28/) (Mobile) ## Accordion vs similar components | | [Accordion](https://kombai.com/glossary/accordion/) | [Tabs](https://kombai.com/glossary/tabs/) | [Tree](https://kombai.com/glossary/tree/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | |---|---|---|---|---| | Shows | Stacked sections, one or many open | One panel at a time | A nested hierarchy | A temporary list of options | | Content | Stays on the page | Replaces the panel | Stays on the page | Closes after a choice | | Best for | FAQs, specs and optional detail | Switching between peer views | Files, folders and nested items | Picking one action or value | ## Build notes - Make each header a