Collapsibles

Have information that the user might want be don't want it cluttering up the page if they don't want it? Use a collapsible.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare elit aliquet, eleifend eros a, viverra nibh. Suspendisse rhoncus sed sem quis placerat. Maecenas sed malesuada ipsum, vel luctus odio. Morbi quis orci eu nisl consequat molestie. Suspendisse tempor nulla sapien, non mattis nibh mollis in.

Cras lobortis elit sem, ut vulputate nisl aliquet vitae. Fusce luctus orci tincidunt, efficitur arcu nec, mattis tellus. Praesent mollis laoreet nibh in consectetur. Ut facilisis nunc eget lectus consequat, sed auctor nibh dapibus. Nam erat velit, eleifend quis gravida ac, cursus ut tellus. Praesent ut dui justo.

Donec efficitur condimentum lacus, ut efficitur libero pretium quis. Donec accumsan, dolor id congue vulputate, ante lacus consectetur mauris, sit amet aliquet turpis nunc vitae tortor.

Code

If you want a collapsible to be open by default, simply add the checked attribute to the input. For example, the left hand navigation is checked to be open when in the documentation.

				
<div class="collapsible-wrap card no-pad">
  <input type="checkbox" id="collapsible-1">
  <label for="collapsible-1">Collapsible 1</label>
  <div class="collapsible-1-area">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<div class="collapsible-wrap card no-pad">
  <input type="checkbox" id="collapsible-2">
  <label for="collapsible-2">Collapsible 2</label>
  <div class="collapsible-2-area">
    <p>Cras lobortis elit sem.</p>
  </div>
</div>

<div class="collapsible-wrap card no-pad">
  <input type="checkbox" id="collapsible-3">
  <label for="collapsible-3">Collapsible 3</label>
  <div class="collapsible-3-area">
    <p>Donec efficitur condimentum lacus.</p>
  </div>
</div>