Accordion

An accordion is an interface component made of stacked headers that expand and collapse to show or hide sections of content. Each header acts as a labeled toggle: clicking or tapping it reveals a panel of content beneath, and activating it again hides that panel away. Accordions are a common way to present a lot of information in a compact space, letting users open only the sections they care about while keeping the rest tidily folded. They appear frequently in frequently-asked-questions lists, product specification tables, settings panels, and mobile navigation, wherever content is naturally divided into discrete, browsable chunks.

An accordion works by toggling the visibility of content panels that are attached to their headers. In its collapsed state, only the headers are shown, giving the user an overview of what is available. Activating a header expands its panel to reveal the content, often with a short animation so the change is easy to follow, and collapses it when activated again. Some accordions allow several panels to be open at once, while others enforce a single open panel, closing one section automatically when another is opened. Accessible implementations use proper markup so that headers are recognized as interactive controls, are operable by keyboard, and announce their expanded or collapsed state to assistive technology, so the pattern works for everyone rather than only for pointer users.

The component is named for the musical instrument, whose bellows physically expand and collapse as it is played. The visual and behavioral analogy is direct: an accordion interface expands and contracts its sections in the same way the instrument's folds open and close. That evocative name has made the pattern easy to recognize and discuss, and it neatly captures the fold-and-unfold motion at the heart of the control.

For a business, an accordion matters because it manages density without hiding content permanently. It lets a page present a large amount of structured information, such as a long list of common questions or a detailed set of specifications, without an intimidating wall of text, because the reader can scan the headers and expand only what is relevant. This shortens the visible page, reduces cognitive load, and is especially valuable on mobile, where vertical space is limited. Well-organized accordions can also keep users engaged with support and product content, helping them self-serve answers rather than leaving or contacting support.

The most common mistake is hiding important content inside collapsed panels that users may never open, since anything essential should generally be visible by default rather than tucked away. Burying content this way can also work against search visibility if it makes key information harder to reach or understand. Another frequent error is using an accordion when the content is short enough to simply show in full, adding needless clicks for no benefit. Poor labeling of the headers, so users cannot predict what each section contains, undermines the whole pattern, as does neglecting keyboard and screen-reader access. An accordion relates to adjacent components: it shares collapsible logic with the grouped panels of a mega menu, it offers a lighter alternative to a modal for revealing detail in place, and its brief reveals differ from the persistent hover hints of a tooltip.