Options

• 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.
• Header:
  • 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

• Chevron:
  • 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 animation 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.

See also

• 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.

External Links

• MailChimp: Disclosure element
• MDN: Details disclosure element
• Polaris: Collapsible
• Ant Design: Collapse
• W3c: Accordion
• Lightning: Accordion pattern
• Lightning: Accordion blueprint
• Lightning: Summary detail blueprint
• MDN: Toggle buttons
• You might not need JS: Accordion