Collapse

Collapsible content

<h4 class="env-text">
   <a
      role="button"
      class="env-button env-button--link"
      href="#container1"
      data-env-collapse
      aria-expanded="false"
      aria-controls="container1"
   >
      Example 1
   </a>
</h4>

<div class="env-collapse" id="container1">
   <p class="env-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
      lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus
      quam. Proin eu tincidunt metus.
   </p>
</div>

Add env-collapse--show to have your content expanded

Background

Add env-collapse-header to give the collapsible header a background Add env-collapse-header--icons to add icons

<h4 class="env-text">
   <a
      class="env-collapse-header env-d--flex env-align-items--center env-justify-content--between"
      role="button"
      href="#container2"
      data-env-collapse
      aria-expanded="false"
      aria-controls="container2"
   >
      <span class="env-m-right--x-large">
         Example 2
      </span>
      <span class="env-collapse-header--icons"></span>
   </a>
</h4>

<div class="env-collapse" id="container2">
   <p class="env-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
      lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus
      quam. Proin eu tincidunt metus.
   </p>
</div>

Methods

Show $('#myCollapse').envCollapse('show')

Hide $('#myCollapse').envCollapse('hide')

Toggle $('#myCollapse').envCollapse('toggle')