Loading…
Loading…
Accordions allow progressive disclosure by expanding/collapsing sections, reducing information overload.
stellae.design
Vertically stacked sections where clicking a header toggles content visibility. Progressive disclosure — show headers, reveal details on demand. Reduces page length, enables scanning, focuses attention. Can be single-open or multi-open. Ideal for FAQs, settings, navigation, subset-needed content.
Accordions and expandables are interaction patterns that allow users to toggle the visibility of content sections, revealing details on demand while keeping the overall interface compact and scannable. They are foundational to information architecture because they let designers present large volumes of content — FAQs, product specifications, navigation menus, settings panels — without overwhelming users with a wall of text on first load. When implemented thoughtfully, accordions reduce cognitive load by letting users self-select the information they care about, but when misused they can bury critical content behind unnecessary interaction barriers that frustrate users who need to scan or compare multiple sections simultaneously.
Apple's product pages use accordions to organize dense technical specifications — processor details, display specs, connectivity options — under clearly labeled section headers that users can expand individually. Each section header uses plain language rather than technical jargon, and the expanded content uses structured tables and comparison layouts that make scanning efficient once revealed. The pattern works because product specifications are reference content that users consult selectively rather than reading linearly.
GOV.UK uses expandable step-by-step patterns to guide users through complex government processes like registering a vehicle or applying for a visa, showing numbered steps with expandable details for each stage. The pattern reveals only the current step's instructions while keeping the full journey visible as a progress outline, reducing overwhelm while maintaining context about where the user is in the overall process. Each expanded section contains actionable content with direct links to the relevant service pages, making the accordion a navigation tool rather than just a content container.
An e-commerce checkout flow collapses shipping address, payment method, and order summary into three closed accordions on a single page, forcing users to manually expand each section to complete their purchase. Users cannot see their shipping address and order total simultaneously, making it impossible to verify details without clicking back and forth between panels. The accordion pattern here adds interaction cost to a task where all information is essential and sequential visibility would reduce errors and abandonment.
• The most common mistake is using accordions as a default solution for any long page without testing whether users actually benefit from the hidden content — research from the Nielsen Norman Group consistently shows that users often prefer scrolling through visible content over clicking to reveal hidden sections, especially on mobile where tap targets and expanded content compete for limited viewport space. Another frequent error is allowing only one accordion panel to be open at a time when users need to compare information across sections, forcing them into a frustrating open-close-open cycle that is slower than simply scrolling a long page. Teams also neglect to consider the accordion's collapsed state as a design challenge in itself — if all panels are closed by default and labels are vague, users face a guessing game about where their answer might be hiding.
Was this article helpful?