Collapsible is an element that allows a user to toggle (view/hide) supplemental information or actions.

To organize related information.
To shorten pages and reduce scrolling when content is not crucial to read in full.
When space is at a premium and long content cannot be displayed all at once.

Contributors	Adam Butterworth (Deactivated) Kevin McGrath (Deactivated)
Slack channel	N/A
Paragon Jira ticket	https://openedx.atlassian.net/browse/PAR-222
Other Jira tickets
Design resources	https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=2982%3A14715
Technical docs

...

Tip
Do

Warning
Don't

Add multiple clickable elements into the collapsed/closed state (eg. buttons, links)
Use different size text between header and body
Put additional space between multiple collapsibles
Use collapsibles for high-priority, critical, or instructional information

♊ Related Components

...

📐 Specification

...