Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 Collapse

❮ Previous

Next ❯

The collapse component in Bootstrap 5 is used to show or hide content with a toggle button. It’s often used for menus, sidebars, or accordions.

Basic Collapse:

Toggle a hidden content area with a button.

This is some placeholder content for the collapse component. It's hidden by default and revealed when triggered.
Example
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#exampleCollapse" aria-expanded="false" aria-controls="exampleCollapse">
Toggle Content
</button>
<div class="collapse" id="exampleCollapse">
<div class="card card-body">
This is some placeholder content for the collapse component. It's hidden by default and revealed when triggered.
</div>
</div>

Try it yourself

Collapse with Multiple Elements:

Control multiple collapsible elements with different buttons.

First collapsible content.
Second collapsible content.
Example
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle First</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle Second</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
First collapsible content.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Second collapsible content.
</div>
</div>
</div>
</div>

Try it yourself

Accordion (Collapsible Group):

Use the collapse component to create an accordion.

This is the first item's accordion body.

This is the second item's accordion body.
Example
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the second item's accordion body.
</div>
</div>
</div>
</div>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.