Collapse

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

How it works

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

Example

Below is a collapsed example that is displayed when the button is clicked. Add @props="collapse-toggle" to an <xref> element to associate a button to a collapse

<p>
  <xref outputclass="btn-primary" props="collapse-toggle" href="#collapse1">
    Toggle Collapse
  </xref>
</p>
<bodydiv outputclass="collapse" id="collapse1">
  <div outputclass="card card-body">
      <p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p>
  </div>
</bodydiv>

Horizontal

The collapse plugin also supports horizontal collapsing. Add @outputclass="collapse-horizontal" to transition the width instead of height and set an @otherprops="style(width: ...) on the immediate child <div> element.

<p>
  <xref outputclass="btn-primary" props="collapse-toggle" href="#collapse2">Toggle Width Collapse</xref>
</p>
<bodydiv outputclass="collapse-horizontal" id="collapse2" otherprops="style(min-height: 120px;)">
  <div outputclass="card card-body" otherprops="style(width: 300px;)">
    <p>This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.</p>
  </div>
</bodydiv>