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

1. 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.

2. Icon: Can be used to indicate the expandable nature of the section (e.g., arrows, plus/minus icons).

3. 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

Size	Header (px)	Icon (px)	Content (px)	Min Height (px)
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