What is an accordion in UX design?
An accordion is a UI component consisting of a vertically stacked list of items, each with a header that users can click or tap to expand and reveal the associated content below it. When a section expands, its content becomes visible; clicking the header again collapses it. Some accordion implementations allow only one section to be open at a time, while others allow multiple sections to be expanded simultaneously. Accordions are used in FAQs, settings panels, navigation menus, and any context where multiple sections of content must share vertical space.
When do accordions help users?
Accordions work well when users need to access one section at a time and benefit from a compact overview before diving into detail. FAQ sections where users scan headers to find their specific question benefit from accordion treatment: the full answers take significant space but most users need only one. Settings panels with many categories benefit from accordion grouping when users typically need to adjust settings in one category at a time. The key condition is that users benefit from the overview that collapsed headers provide, rather than simply needing to read through all content.
When do accordions hurt user experience?
Accordions create friction when users need to compare content across sections, when all users need to read most or all sections, when the content within sections is short enough that collapsing it saves little space, or when users cannot predict from the header which section contains what they need. Hiding content behind an interaction requires users to actively seek it out, which means content that users should encounter is missed by those who do not expand every section. Progressive disclosure is the broader principle that justifies accordions, but applies only when the disclosed content is genuinely secondary to most users.