Accordion
A UI component that expands and collapses to show or hide content sections.
Definition
An accordion is an interactive interface element that displays a list of headers stacked vertically. When users click a header, its associated content panel expands while others collapse, conserving screen space.
This pattern is especially useful for FAQs, navigation menus, and any content that can be organized into discrete, scannable sections.
Why It Matters
Accordions reduce cognitive load by letting users focus on one content section at a time. They're essential for mobile experiences where screen real estate is limited.
Well-designed accordions improve information architecture by making dense content more digestible and scannable.
Examples in Practice
An FAQ page uses accordions so users can quickly scan questions and expand only the ones they need answered.
A mobile navigation menu collapses into an accordion, with each category expanding to show subcategories.
A product specification page uses accordions for technical details, shipping info, and warranty information.