Accordionstyle

Accordionstyle refers to a user interface pattern in which content is organized into a vertical stack of sections, each with a header. The content for a section can be expanded or collapsed by interacting with the header, producing an accordion-like effect where only the active section's content is visible. The term draws its name from the musical instrument accordion, which expands and contracts.

In its typical implementation, one section is open at a time, and opening another section collapses the previous one. Variants allow multiple sections to stay open. Headers usually act as controls with clear indicators of state; content areas are hidden or revealed with animations.

Accordionstyle is widely used on FAQ pages, product documentation, settings panels, and long forms where screen space is at a premium. It improves navigability by letting readers skim headers and selectively view content.

Effective implementations provide keyboard accessibility, ARIA roles, and proper focus management. Developers should ensure that the control communicates expanded state, is operable with keyboard, and does not rely solely on color to convey status.

Critics argue it can hide information and increase interaction friction, and overuse can degrade findability. Alternatives include accordions with search, toggleable quick views, or simple collapsible sections integrated into the content flow. See also related concepts such as collapsible panels and expansion panels.