---
title: "Collapsible"
navTitle: "Collapsible"
summaryParagraph: Collapsibles are used to collapse and expand content inline on a page. This lets users progressively disclose information as desired.
tags: ["Expandable", "Accordion", "Show and hide", "Reveal", "Disclosure"]
needToKnow:
  - "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."
demoStoryId: collapsible-react--single-collapsible-kaizen-site-demo
---

## 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](/guidelines/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](https://ux.mailchimp.com/patterns/forms#disclosure)
* [MDN: Details disclosure element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
* [Polaris: Collapsible](https://polaris.shopify.com/components/behavior/collapsible#navigation)
* [Ant Design: Collapse](https://ant.design/components/collapse/)
* [W3c: Accordion](https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html)
* [Lightning: Accordion pattern](https://www.lightningdesignsystem.com/accessibility/patterns/accordion/)
* [Lightning: Accordion blueprint](https://www.lightningdesignsystem.com/components/accordion/)
* [Lightning: Summary detail blueprint](https://www.lightningdesignsystem.com/components/summary-detail/)
* [MDN: Toggle buttons](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role)
* [You might not need JS: Accordion](http://youmightnotneedjs.com/#accordion)