.collapse
hides content.collapsing
is applied during transitions.collapse.show
shows content.data-toggle="collapse"
attribute to an <a>
or a <button>
element. Then add the data-target="#id"
attribute to connect the button with the collapsible content .<div>
<a class="btn btn-primary" data-toggle="collapse" href="#BT4Collapse" aria-expanded="false" aria-controls="BT4Collapse">
Link
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BT4Collapse" aria-expanded="false" aria-controls="BT4Collapse">
Button
</button>
</div>
<div class="collapse" id="BT4Collapse">
<div class="card card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
The show
and hide
multiple elements by referencing them with a JQuery selector in its href
or data-target
attribute.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapse1" aria-expanded="false" aria-controls="multiCollapse1">First Element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Second Element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapse1 multiCollapse2">Toggle Both Elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse1">
<div class="card card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse2">
<div class="card card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div>
</div>
Using the card
component in data-parent
attribute. you can extend the default collapse behavior to create an accordion.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapse1" aria-expanded="false" aria-controls="multiCollapse1">First Element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Second Element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapse1 multiCollapse2">Toggle Both Elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse1">
<div class="card card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse2">
<div class="card card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
</div>
</div>