Overview
Accordion
An accordion allows users to toggle the display of sections of content.
Overview
The accordion component collapse content and make page length manageable in terms of scrolling. They lessen visual complexity and allow users to focus on the content most relevant for the current task.
Accordions shorten pages and reduce scrolling, but they increase the interaction clicks by requiring users to decide on accordion labels.
When to use?
- When there is a lot of information and you need a way to organise the same.
- When you need to cut short on page length and make information digestible, one at a time.
- When there is less screen real-estate and you want to show long-form of content.
Anatomy
- Label: contains the accordion title and designates the revealing content.
- Icon: Indicates if the accordion is open or closed.
- Expanded content: Reveals more information in form of text when in expanded state.
Best practices
- Use of Chevron icon: After clicking on the accordion, the Chevron rotates to indicate that the element has been successfully expanded. When clicked again, a collapse occurs, which returns the chevron to its initial position.
- Expanded element: If multiple accordions are used, the expanded state needs to be highlighted. By this, we help the user understand which accordion element is opened.
- Use dividers: In the vast majority of cases, you might want to use a contained accordion. Divide its items with a slightly noticeable separator.
Recommended resources
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more