💠 Collapsible

An interactive component which expands/collapses a panel.

Usage

The Collapsible component is an interactive UI element that allows users to expand and collapse sections of content.

Unlike an accordion, which typically only allows one section to be open at a time, collapsible components can be used independently to hide or reveal content as needed. This is particularly useful for managing the display of lengthy or optional information without overwhelming the user with too much content at once.

When to use

• Long content management: Use Collapsibles to manage long sections of content that are not essential to be displayed all at once, such as FAQs or detailed descriptions.
• Progressive disclosure: Employ Collapsibles to implement progressive disclosure—only showing users the information they need when they need it.
• Optional information: Utilize Collapsibles for optional or supplementary information that users can choose to view if they are interested.
• Space-saving: Collapsibles are ideal for saving space on the page while still making all content accessible to the user.

Avoid using Collapsible components for critical information that users must see. Do not overuse them on a page, as too many collapsible sections can lead to a confusing and fragmented user experience.

Examples

Default

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions