View on GitHub

Collapse extended

Custom additions to the Collapse component

Opened/Closed toggle

Using elements with the class .collapse-closed or .collapse-opened within the collapse toggle, you can show/hide different content depending on the collapse state.

This does require the use of aria-expanded on the collapse toggle.

Example

Click the button below to see it’s text change.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    <span class="collapse-closed">Open</span>
    <span class="collapse-opened">Close</span>
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>