Accordion
Accordions allow users to expand and collapse sections of content, making it easier to navigate and manage large amounts of information within a limited space.
Overview
The Accordion component is used to organize and display content in a vertically stacked list of headers that can be expanded or collapsed to show or hide associated sections of content. It is an effective way to manage and present large amounts of information in a compact and user-friendly manner.
When to use
Use accordions to display content in a concise manner, particularly when dealing with large datasets or lengthy content.
Use accordions when you want to allow users to control what information they want to view or hide.
Use accordions to group related items or sections of content that can be expanded or collapsed as needed.
When not to use
Avoid using accordions for primary navigation elements; consider using menus or tabs instead.
Do not use accordions when all content needs to be visible at once; this can hinder usability.
Avoid using accordions for content that requires immediate visibility or frequent access.
Types
Anatomy
Header: The clickable element that toggles the visibility of the associated content. Includes the title and optional icons. Should be concise and descriptive, giving a clear indication of the content within.
Icon: Can be used to indicate the expandable nature of the section (e.g., arrows, plus/minus icons).
Content: The expandable section that contains the detailed information or additional content. Hidden by default and displayed when the header is clicked. Detailed information that is revealed upon expanding the section. Should be formatted for readability, including headings, paragraphs, lists, and other relevant content types.
Styles
States
Size
Small
12
16
12
32
Medium
14
20
14
36
Large
16
24
14
47
Padding
Alignment
Accessibility
Expand/Collapse Animation: Smooth transition effects to enhance user experience when toggling sections.
Keyboard Accessibility: Support for keyboard navigation, including focus states and the ability to toggle sections using the Enter or Space key.
Responsive Design: Accordions should adapt to different screen sizes, ensuring usability on both desktop and mobile devices.Â
Example
Last updated