User Manual

Collapse

This collapsable conmponent contains a header and a content container. The header automatically places an arrow. When the arrow/header is toggled the content is shown or hidden. The height of the content is taken into account in order for the collapsable animation to work.

Default

This is a collapse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat ipsum, posuere vitae augue eu, fringilla congue lectus. Suspendisse sapien lectus, lobortis id ipsum sed, euismod vulputate quam. In leo est, ullamcorper et vehicula at, rhoncus sit amet justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat ipsum, posuere vitae augue eu, fringilla congue lectus. Suspendisse sapien lectus, lobortis id ipsum sed, euismod vulputate quam. In leo est, ullamcorper et vehicula at, rhoncus sit amet justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat ipsum, posuere vitae augue eu, fringilla congue lectus. Suspendisse sapien lectus, lobortis id ipsum sed, euismod vulputate quam. In leo est, ullamcorper et vehicula at, rhoncus sit amet justo. 


    
      

  

  <div class="m-collapse js-collapse ">
    <div class="m-collapse__header">
      This is a collapse
    </div>

    <div class="m-collapse__content">
      <div class="m-collapse__children">
        
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat ipsum,
  posuere vitae augue eu, fringilla congue lectus. Suspendisse sapien lectus,
  lobortis id ipsum sed, euismod vulputate quam. In leo est, ullamcorper et
  vehicula at, rhoncus sit amet justo. </p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat ipsum,
  posuere vitae augue eu, fringilla congue lectus. Suspendisse sapien lectus,
  lobortis id ipsum sed, euismod vulputate quam. In leo est, ullamcorper et
  vehicula at, rhoncus sit amet justo. </p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat ipsum,
  posuere vitae augue eu, fringilla congue lectus. Suspendisse sapien lectus,
  lobortis id ipsum sed, euismod vulputate quam. In leo est, ullamcorper et
  vehicula at, rhoncus sit amet justo. </p>

      </div>
    </div>
  </div>

States

  • is-open

    Indicates whether your collapse is open or not

JavaScript

  • js-collapse

    This class is used to attach the JavaScript functionality onto the component in the styleguide. It enables the collapse component to be toggled onto the is-active class.