Accordion
An accordion is a UI component that organizes content into collapsible sections or panels. Each section has a header that, when clicked or tapped, reveals or hides its associated content. Accordions are particularly useful for managing limited screen space and displaying large amounts of information in a structured, easily navigable format.
Usage
Efficient display of large content: Break down long text or numerous items into manageable, collapsible sections.
Improve user experience: Users can quickly scan headers to find what they need, expanding only the sections of interest.
Mobile-friendly layouts: On smaller screens, accordions help reduce scrolling by hiding content until needed.
Use cases
FAQ sections, where each question expands to reveal the answer
Collapsible product specifications or features
Multi-step forms, where users expand each section one at a time
Not to be confused with
Tabs: Tabs also organize content into distinct sections, but they typically present each section in a separate tab pane. Accordions, on the other hand, expand and collapse content vertically in the same space.
Dropdown: A dropdown usually offers a list of options or actions, collapsing them into a small menu. An accordion may contain more extensive content, including text, images, forms, and more.
Panels/Drawers: These are often used as larger containers or overlays. While they can be collapsible, panels and drawers typically serve a different purpose (e.g., a settings panel sliding in from the side).
Best practices
Use descriptive headers
Each accordion header should clearly communicate the section’s content or purpose.
Provide visual indicators
Icons like chevrons or plus/minus signs help users quickly identify which sections are open or closed.
Decide on single or multiple open sections
Determine whether multiple sections can be open simultaneously or if opening one closes the others. This choice can depend on context or user preference.
Keep the content concise
While accordions allow hiding large amounts of data, overly long content within a panel can still overwhelm users. Consider splitting very long sections into further sub-sections.
Ensure accessibility
Make sure each accordion header is focusable by keyboard (e.g., <button> or <a> tags).
Use appropriate ARIA attributes (aria-expanded, aria-controls) to help screen readers convey the accordion’s state.
Handle keyboard navigation properly (e.g., arrow keys to move between headers).
Maintain visual consistency
Keep spacing, typography, and icon styles consistent across all accordion panels.
Keep accordion headers clear and concise, so users immediately understand what each section contains.
Summary
An accordion is an excellent way to organize and condense content in an interface, particularly when space is limited or when information is better consumed in bite-sized pieces. By combining clear headers, visual indicators, and solid accessibility practices, accordions provide a user-friendly, efficient way to navigate and display information.
