Collapse
Link
Show and hide other content with link using the "href" attribute
Link with href
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.
<a href="" class="btn btn-primary">Link with href</a>
<div id="hrefCollapse">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div><a href="" class="btn btn-primary">Link with href</a>
<div id="hrefCollapse">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div>
Button
Show and hide other content with button using the "data-bs-target" attribute
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.
<button type="button" class="btn btn-primary">Button with data-bs-target</button>
<div id="dataTargetCollapse">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div><button type="button" class="btn btn-primary">Button with data-bs-target</button>
<div id="dataTargetCollapse">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div>
Horizontal
Set width on the immediate child of the collapsed element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.
<button type="button" class="btn btn-primary">Button with data-bs-target</button>
<div style="min-height: 170px;">
<div id="horizontalCollapse">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div>
</div><button type="button" class="btn btn-primary">Button with data-bs-target</button>
<div style="min-height: 170px;">
<div id="horizontalCollapse">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div>
</div>
Multiple targets
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.
<button type="button" class="btn btn-primary">Toggle both</button>
<button type="button" class="btn btn-primary">Toggle first</button>
<button type="button" class="btn btn-primary">Toggle second</button>
<button type="button" class="btn btn-primary">Toggle first</button>
<button type="button" class="btn btn-primary">Toggle second</button>
<div class="row">
<div class="col">
<div class="multiple-collapse" id="multipleCollapse1">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div>
</div>
<div class="col">
<div class="multiple-collapse" id="multipleCollapse2">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div>
</div>
</div><button type="button" class="btn btn-primary">Toggle both</button>
<button type="button" class="btn btn-primary">Toggle first</button>
<button type="button" class="btn btn-primary">Toggle second</button>
<button type="button" class="btn btn-primary">Toggle first</button>
<button type="button" class="btn btn-primary">Toggle second</button>
<div class="row">
<div class="col">
<div class="multiple-collapse" id="multipleCollapse1">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div>
</div>
<div class="col">
<div class="multiple-collapse" id="multipleCollapse2">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.</div>
</div>
</div>
</div>