Accordions

Accordions are UI components with collapsed content blocks that reveal hidden information on click. They exemplify progressive disclosure, showing basic information first and revealing complex details only when requested, reducing cognitive load.

Help centers and FAQ pages commonly use accordions to organize information relevant to specific user groups.

While accordions seem ideal for mobile — saving space and reducing clutter — they can disorient users and create excessive scrolling.

For mobile accordions, focus on clear navigation back to previous states. One solution is fixing the accordion heading and expanding filters downward. This helps users maintain orientation and allows closing via the sticky header.^[1]