Versions Compared

Old Version 1

changes.mady.by.user Kevin McGrath (Deactivated)

Saved on

compared with

New Version Current

changes.mady.by.user Adam Butterworth

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Status
colourYellowGreen
titleDRAFTApproved to Add
Status
colourPurpleGreen
titleDesign PENDINGComplete
Status
titleIMPLEMENTATION PENDING

...

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

When to use:

  • 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

...