.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>