Collapse

Overview

The collapse component can be used to let the user alternate the display of a block of content.
Each collapse has an element that acts as its header and it will trigger the change of the content block's display state when clicked.

👁 UX: If you need to make available a lot of important content that may not be all that interesting but for a small percentage of users, it could be a good idea to use collapses so it's readily accessible, but occupying a little fraction of the space.

Simple collapse.

Opened collapse.

Card styled collapse.

Usage

Dependencies

To get the Collapse component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/02-molecules/collapse';

import Collapse from 'design-system/src/js/02-molecules/collapse';

🧐 Note: The card styled collapse of the above example, is just a standard collapse with the .card style added to the parent div element. If you want to use it, check the card component documentation and make sure you are also including its dependencies!

Basic code

The collapse component is composed of :

• A div parent element with the collapse class.
• A header element with the collapse__header class.
  The header is clickable, and acts as the collapse trigger.
• A div element with the class collapse__content.
  When the collapse is triggered, the contents of this block are shown/hidden.

This component has to be initialized with javascript. You must import the Collapse class. A single instantiation of this class will initialize all collapses in the page.

<div class="collapse">
  <h4 class="collapse__header">A treasure lies inside of me...</h4>
  <div class="collapse__content">
    <p>“No power and no treasure can outweigh the extension of our knowledge.”<br /><br />― Democritus</p>
  </div>
</div>

.collapse
  h4.collapse__header A treasure lies inside of me...
  .collapse__content
    p
      | “No power and no treasure can outweigh the extension of our knowledge.”
      br
      br
      | ― Democritus

new Collapse();

HTML attributes

• data-opened

data-opened

When set to "true" the collapse will be initialized in it's opened state.
Check the second example on the overview.

<div class="collapse" data-opened="true">
  <h4 class="collapse__header">I do not like to hide</h4>
  <div class="collapse__content">
    <p>“Maybe it's just hiding somewhere. Or gone on a trip to come home. But falling in love is always a pretty crazy thing. It might appear out of the blue and just grab you. Who knows — maybe even tomorrow.”<br /><br />― Haruki Murakami</p>
  </div>
</div>

.collapse(data-opened="true" data-opened="true")
  h4.collapse__header I do not like to hide
  .collapse__content
    p
      | “Maybe it's just hiding somewhere. Or gone on a trip to come home. But falling in love is always a pretty crazy thing. It might appear out of the blue and just grab you. Who knows — maybe even tomorrow.”
      br
      br
      | ― Haruki Murakami