Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Read the
official Bootstrap Documentation for a full list of
instructions and other options.
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 0 to a specified height or from its
current height to 0. Given how CSS handles animations, you cannot use padding
on a .collapse
element. Instead, use the class as an independent wrapping element.
<p class="demo-inline-spacing">
<a class="btn btn-primary me-1" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary me-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="d-flex p-4 border">
<img src="assets/img/elements/1.jpg" alt="collapse-image" height="125" class="me-4 mb-sm-0 mb-2">
<span>
...
</span>
</div>
</div>
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>
tags can show and hide a single element if they each reference the same element with their href
or data-bs-target
attribute.
<p class="demo-inline-spacing">
<a class="btn btn-primary me-1" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary me-1" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">
Toggle second element
</button>
<button class="btn btn-primary me-1" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">
Toggle both elements
</button>
</p>
<div class="row">
<div class="col-12 col-md-6 mb-4 mb-md-0">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="d-flex p-4 border">
<img src="assets/img/elements/2.jpg" alt="collapse-image" height="125" class="me-4 mb-sm-0 mb-2">
<span>
...
</span>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="d-flex p-4 border">
<img src="assets/img/elements/3.jpg" alt="collapse-image" height="125" class="me-4 mb-sm-0 mb-2">
<span>
...
</span>
</div>
</div>
</div>
</div>