Also known as:
Show and hide
Collapsibles are used to collapse and expand content inline on a page. This lets users progressively disclose information as desired.
Badge (not built)
Button Group (not built)
Card (not built)
Divider (not built)
Infinite Scroll (not built)
Loading Skeleton (not built)
Loading Spinner (not built)
Pagination (not built)
Tile (not built)
Need to know
We usually start collapsibles in a collapsed position by default so that users can see what's available.
We often avoid accordions, which are a specific type of collapsible that allows only 1 section open at a time and is often an annoying constraint on user interaction.
Collapsible group: a group of related collapsible sections that may be combined or separated by whitespace.
Single collapsible: a standalone collapsible for 1 item of content.
Default header: provide plain text for a title to use default styling.
Custom header: supply your own header content and styling for the header and title.
Lazy-loading: when handling lots of data, you might lazy load collapsible content for performance reasons. This might limit animation.
Sticky header: when the user scrolls down a long way, they can keep context of where they are by looking at the sticky header. They may also collapse a long section easily using the sticky header.
We don't yet support:
Accordion: a collapsible group that only allows 1 section to be open at a time.
Show/hide button for outside of the collapsible group.
To keep in mind
We only support chevron on the right. We show a downwards chevron when section is closed and upwards when open.
Avoid multi-level expansions.
Animation: we animate expansion using a reveal animation (see
for guidance on timing and variable height animations).
When to use
Use collapsibles when many users want an overview and some users want to dig into specific parts.
Use accordion when it’s extremely important to focus on one single thing at a time.
When not to use
Use a table when there’s a consistent heading and tabular data.
You might want to show and hide text with truncation using a control that says “Show more” or similar. We don't yet support that and it might belong to the Text component instead.
MailChimp: Disclosure element
MDN: Details disclosure element
Ant Design: Collapse
Lightning: Accordion pattern
Lightning: Accordion blueprint
Lightning: Summary detail blueprint
MDN: Toggle buttons
You might not need JS: Accordion
© Culture Amp Pty Ltd
Link to Culture Amp site