Collapse

Basic Collapse

Basic
Source Code
Basic
Source Code
<p>
<a class="btn btn-primary mr-2 mb-2" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse show" id="collapseExample" style="">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid.
Nihil
anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
proident.
</div>
</div>

Multiple Target Collapse

Multi
Source Code
Multi
Source Code
<p>
<a class="btn btn-primary mr-2 mb-2" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="true" aria-controls="multiCollapseExample1">First Element</a>
<button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="true" aria-controls="multiCollapseExample2">Second Element
</button>
<button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="true" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
elements
</button>
</p>
<div class="row">
<div class="col">
<div class="multi-collapse collapse show" id="multiCollapseExample1" style="">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea
proident.
</div>
</div>
</div>
<div class="col">
<div class="multi-collapse collapse show" id="multiCollapseExample2" style="">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea
proident.
</div>
</div>
</div>
</div>

Accordion

Accordion
Source Code
Accordion
Source Code
<!-- Accordion -->
<div class="accordion" id="accordion-example">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one">
Collapsible Group Item #1
</button>
</h5>
</div>
‚Äč
<div id="collapse-one" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-example" style="">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-two" aria-expanded="false" aria-controls="collapse-two">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapse-two" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion-example" style="">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-three" aria-expanded="false" aria-controls="collapse-three">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapse-three" class="collapse" aria-labelledby="headingThree" data-parent="#accordion-example" style="">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
</div>
<!-- /accordion -->