Amber

collapsable.html

<!-- collapsable wrapped in data-collpasable attribute
has 2 sub-element in it, (1) Header and (2) Collapsable-block.

If Header is wrapped in collapsable block it will automatically add a dropdown
on the left side of the text.  Collapsable block are the ones that show and
hide when header is clicked. -->
<div data-collapsable="">
<h2>First div</h2>
<div class="collapsable-block">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum
    porta varius. Duis vel posuere diam. Phasellus vulputate pulvinar ornare.
    Integer suscipit laoreet nisi nec facilisis. Sed varius eu erat vitae
    sollicitudin. Donec ultrices ante et risus ullamcorper, vitae vulputate dolor
    eleifend. Integer id dui ac dui lobortis egestas in vel magna. Sed et porta
    eros. Sed commodo nunc quam, ut accumsan nulla volutpat eu. Pellentesque
    ullamcorper finibus imperdiet. Pellentesque pulvinar, dolor sed interdum
    molestie, magna ipsum placerat dui, sit amet varius diam lectus sit amet
    lectus. Pellentesque auctor nibh nibh, a vestibulum lectus egestas sit amet.
    Duis faucibus ut orci et congue. Aliquam porta ipsum non risus iaculis varius.
    Etiam eget ex at lectus euismod sodales id a nibh. Integer purus ante, porta et
    eleifend non, tincidunt id ipsum.
  </p>
  <p>Morbi id ante risus. Nulla facilisi.
    Mauris mauris ligula, dapibus eget est ac, lacinia tristique leo. Vivamus
    iaculis laoreet semper. Proin quis eros nec ante malesuada commodo in sit amet
    tellus. Sed tempus, sapien sed convallis sollicitudin, est sem laoreet ex, eget
    faucibus massa sapien eget quam. Phasellus non libero erat. Sed molestie, lorem
    ac dignissim tristique, velit leo rutrum dui, nec fermentum augue est vel
    mauris. Fusce turpis lacus, elementum eu sollicitudin ac, rutrum at felis.
    Pellentesque tincidunt justo ac odio malesuada placerat. Vestibulum rhoncus at
    magna at fermentum. Phasellus rutrum, dui sed sollicitudin fringilla, magna
    metus ultrices lectus, nec imperdiet elit lorem condimentum orci. Aliquam in
    fermentum tellus. Suspendisse consequat imperdiet diam, eget pellentesque diam
    pulvinar at
  </p>
</div>
</div>

<!-- this is an example when adding tags to a collapsable section. It will
create a 'Manual' button on the upper portion of the page -->
<div data-collapsable="" data-collapsable-tags="manual">
  <h2>Manual div</h2>
  <div class="collapsable-block">
    <p>Sed ullamcorper placerat nisi. Aliquam tristique risus sit amet bibendum
      tempus. Aliquam imperdiet egestas pellentesque. Mauris interdum velit sed
      posuere pellentesque. Praesent quis elit ac lorem molestie aliquet eget eget
      magna. Suspendisse porttitor euismod eros sit amet malesuada. Etiam non purus
      scelerisque, gravida lectus et, tristique lacus. Nulla quis tempor nunc.
      Suspendisse quam turpis, sagittis a faucibus vel, ultrices sit amet ante.
      Maecenas interdum a nisi eu maximus. Morbi non interdum augue, sit amet pretium
      lectus. Etiam rhoncus a arcu non lobortis. Ut eget tincidunt tortor. Morbi
      hendrerit dui accumsan ante vestibulum fermentum. Proin nisi urna, condimentum
      interdum molestie vitae, placerat ut purus
    </p>
  </div>
</div>

<div data-collapsable="" data-collapsable-tags="training">
  <h2>Training div</h2>
  <div class="collapsable-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum
      porta varius. Duis vel posuere diam. Phasellus vulputate pulvinar ornare.
      Integer suscipit laoreet nisi nec facilisis. Sed varius eu erat vitae
      sollicitudin. Donec ultrices ante et risus ullamcorper, vitae vulputate dolor
      eleifend. Integer id dui ac dui lobortis egestas in vel magna. Sed et porta
      eros. Sed commodo nunc quam, ut accumsan nulla volutpat eu. Pellentesque
      ullamcorper finibus imperdiet. Pellentesque pulvinar, dolor sed interdum
      molestie, magna ipsum placerat dui, sit amet varius diam lectus sit amet
      lectus. Pellentesque auctor nibh nibh, a vestibulum lectus egestas sit amet.
      Duis faucibus ut orci et congue. Aliquam porta ipsum non risus iaculis varius.
      Etiam eget ex at lectus euismod sodales id a nibh. Integer purus ante, porta et
      eleifend non, tincidunt id ipsum.
    </p>
  </div>
</div>

<!-- You may also add multiple tags separated by comma -->
<div data-collapsable="" data-collapsable-tags="training, manual">
  <h2>Training &amp; Manual div</h2>
  <div class="collapsable-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum
      porta varius. Duis vel posuere diam. Phasellus vulputate pulvinar ornare.
      Integer suscipit laoreet nisi nec facilisis. Sed varius eu erat vitae
      sollicitudin. Donec ultrices ante et risus ullamcorper, vitae vulputate dolor
      eleifend. Integer id dui ac dui lobortis egestas in vel magna. Sed et porta
      eros. Sed commodo nunc quam, ut accumsan nulla volutpat eu. Pellentesque
      ullamcorper finibus imperdiet. Pellentesque pulvinar, dolor sed interdum
      molestie, magna ipsum placerat dui, sit amet varius diam lectus sit amet
      lectus. Pellentesque auctor nibh nibh, a vestibulum lectus egestas sit amet.
      Duis faucibus ut orci et congue. Aliquam porta ipsum non risus iaculis varius.
      Etiam eget ex at lectus euismod sodales id a nibh. Integer purus ante, porta et
      eleifend non, tincidunt id ipsum.
    </p>
  </div>
</div>

<!-- data-collpasable attribute also accept option 'close' which will be initially
close when page loads -->
<div data-collapsable="close">
  <h2>div initially close</h2>
  <div class="collapsable-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum
    porta varius. Duis vel posuere diam. Phasellus vulputate pulvinar ornare.
    Integer suscipit laoreet nisi nec facilisis. Sed varius eu erat vitae
    sollicitudin. Donec ultrices ante et risus ullamcorper, vitae vulputate
    dolor eleifend. Integer id dui ac dui lobortis egestas in vel magna. Sed et
    porta eros. Sed commodo nunc quam, ut accumsan nulla volutpat eu.
    Pellentesque ullamcorper finibus imperdiet. Pellentesque pulvinar, dolor
    sed interdum molestie, magna ipsum placerat dui, sit amet varius diam
    lectus sit amet lectus. Pellentesque auctor nibh nibh, a vestibulum lectus
    egestas sit amet. Duis faucibus ut orci et congue. Aliquam porta ipsum non
    risus iaculis varius. Etiam eget ex at lectus euismod sodales id a nibh.
    Integer purus ante, porta et eleifend non, tincidunt id ipsum.
    </p>
  </div>
</div>
<div data-collapsable="">
  <h3>Heading 3</h3>
  <div class="collapsable-block">
    <p>Morbi id ante risus. Nulla facilisi. Mauris mauris ligula, dapibus eget
    est ac, lacinia tristique leo. Vivamus iaculis laoreet semper. Proin quis
    eros nec ante malesuada commodo in sit amet tellus. Sed tempus, sapien sed
    convallis sollicitudin, est sem laoreet ex, eget faucibus massa sapien eget
    quam. Phasellus non libero erat. Sed molestie, lorem ac dignissim
    tristique, velit leo rutrum dui, nec fermentum augue est vel mauris. Fusce
    turpis lacus, elementum eu sollicitudin ac, rutrum at felis. Pellentesque
    tincidunt justo ac odio malesuada placerat. Vestibulum rhoncus at magna at
    fermentum. Phasellus rutrum, dui sed sollicitudin fringilla, magna metus
    ultrices lectus, nec imperdiet elit lorem condimentum orci. Aliquam in
    fermentum tellus. Suspendisse consequat imperdiet diam, eget pellentesque
    diam pulvinar at</p>
  </div>
</div>