Approved to Add Design Complete IMPLEMENTATION PENDING

The three statuses above and their possible values:

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS

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

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 Use collapsibles for high-priority, critical, or instructional information

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.