Accordion

Preview

Resources

Properties

Best practises

• Use accordions to organize related content into collapsible sections.
• Keep section titles clear, users should understand what’s inside without expanding.
• Make the entire header area clickable to improve usability.
• Maintain content hierarchy, avoid nesting accordions inside each other.
• Avoid putting critical or required information inside accordions.

When to use

When presenting a lot of related content while keeping the interface compact.
Where users don’t need all the information at once but should have the option to expand details.
When user needs to browse grouped content selectively.
When users need to see everything at the same time.
If users need to compare multiple sections at once.

Behaviour

Accordions expand and collapse content vertically when their headers are clicked. This allows to show or hide sections without navigating away. Accordion item will remain open until the user closes it. Typically, only one accordion item is open at a time. Accordion header is the trigger for expanding and collapsing.