APPROVED TO ADD DESIGN COMPLETE IMPLEMENTATION PENDING

What are these tags?

The three statuses above and their possible values:

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

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

🌳 Variants

🌞 Best Practices

Do
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

What does an engineer need to know in order to build this component?

Open/Close	When the toggle is clicked (button or link), the “hidden” content should appear and push all other page content down. When clicked again, the “hidden” content should collapse back into the static component. (example)

Notes from collaborator conversations or meetings regarding this component.