Collapse
LeptonX uses
Bootstrap Collapse's
component's latest version.
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Example
Click the buttons below to show and hide another element via class changes:
.collapsehides content.collapsingis applied during transitions.collapse.showshows content
Generally, we recommend using a button with the data-bs-target attribute. While not
recommended from a semantic point of view, you can also use a link with the
href attribute (and a role="button"). In both cases, the
data-bs-toggle="collapse" is required.
Preview
Link with hrefHTML
<a
class="btn btn-primary"
data-bs-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
>
Link with href
</a>
<button
class="btn btn-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by
default but revealed when the user activates the relevant trigger.
</div>
</div>
Multiple targets
A <button> or <a> can show and hide multiple elements by
referencing them with a selector in its href or
data-bs-target attribute. Multiple <button> or
<a> can show and hide an element if they each reference it with their
href or data-bs-target attribute
Preview
Toggle FirstHTML
<a
class="btn btn-primary"
data-bs-toggle="collapse"
href="#multiCollapseExample1"
role="button"
aria-expanded="false"
aria-controls="multiCollapseExample1"
>Toggle First</a
>
<button
class="btn btn-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#multiCollapseExample2"
aria-expanded="false"
aria-controls="multiCollapseExample2"
>
Toggle Second
</button>
<button
class="btn btn-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target=".multi-collapse"
aria-expanded="false"
aria-controls="multiCollapseExample1 multiCollapseExample2"
>
Toggle Both
</button>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this
multi-collapse example. This panel is hidden by default but revealed
when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this
multi-collapse example. This panel is hidden by default but revealed
when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
