Accordion

When to use this component

Use Accordions to reduce the content load and when the users need only few pieces of information on the page. The users can focus on what matter most, especially when the screen space is limited.

Use an accordion when the information in each panel is independent, such as FAQs or news items.

Do not hide important content in an accordion.

Behaviour

The accordion has two states: collapsed and expanded.

Users can expand and collapse panels with full control. Multiple panels can be open at the same time.

Interaction

The entire area containing the heading is clickable. Clicking (or tapping on mobile) expands or collapses the panel. By default, the accordion is collapsed unless specific requirements dictate otherwise.

The icon changes based on the state: the “chevron-down” indicates collapsed and the “chevron-up” indicates expanded. The icon rotates 180°

Animation details:

• Duration: 300ms
• Type: ease-in-out

Accessibility

The component uses ARIA attributes such as aria-expanded that helps make accordions functional with assistive technologies. The screen readers inform users about state changes when the panel is opened or closed. When the accordion is collapsed, the non-visible content is not reachable. 

The component support the following keyboard navigation: 

• Tab to focus
• Enter/Space to toggle
• Arrow keys to navigate 

For detailed guidance, refer to ARIA Authoring Practices Guide (APG).

Alternative components

Consider other components or UI patterns depending on whether your goal is to reduce screen clutter, improve navigation, or display dense information.

• Use Tabs instead of an accordion when users need to quickly switch between a few long sections without pushing content further down the page.
• Use Cards or a List view when presenting a long list of items that users may need to compare. This approach helps manage larger sets of content and allows users to navigate to a dedicated page for detailed information.
• Use Side navigation or a Table of contents (anchor links that jump to specific sections on a long page) when the content has a deep hierarchy and you do not want to hide important information.
• Use a Full page layout that reveals all content when the information is short to medium in length and does not require progressive disclosure or additional interaction.