Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugin.

How it works

The collapse plugin uses a few classes to handle the heavy lifting:

• .collapse hides content.
• .collapsing is applied during transitions.
• .collapse.show shows content.
• data-boodoo-toggle="collapse" on the trigger, with data-boodoo-target (or an href) pointing to the collapsible element.

Example

Click the button to toggle the collapse.

<button class="btn btn-primary" type="button"
        data-boodoo-toggle="collapse" data-boodoo-target="#collapseExample"
        aria-expanded="false" aria-controls="collapseExample">
  Button with target
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">...</div>
</div>

Horizontal

Add .collapse-horizontal to the collapsible element to animate width instead of height.

Multiple toggles & targets

A single trigger can control multiple targets by passing a space-separated selector to data-boodoo-target, or multiple triggers can control the same target.

<!-- single button, two targets -->
<button data-boodoo-toggle="collapse"
        data-boodoo-target="#targetOne #targetTwo">Toggle both</button>