Bootstrap 5 accordion menus are used to manage a large amount of content and navigation lists.
Steps:To create an accordion menu:
.accordion
to the accordion container and also assign a unique id.
.accordion-item
to the every child of .accordion
element.
.accordion-header
to
<h*>
element base class and provide unique id.Then place a button inside <h*>
element.
data-bs-toggle="collapse"
, .accordion-button
& add data attribute data-bs-target="#AccordionBodyContainerId"
and assign respective accordion body container id that will be preceded by hash character(#).
.accordion-collapse.collapse
to the accordion body parent container , also assign unique id and point it to button's data attribute data-bs-target
and add data attribute data-bs-parent="#accordionExample"
and assign accordion unique id inside it that will be preceded by the hash character.
.accordion-body
..show
to one of the accordion body parent container base classes to show its content.
General Syntax
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<b 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>
</b>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>First Accodion Heading
</strong> This is first accodion content.
</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">
<strong>Second Accodion Heading
</strong> This is second accodion content.
</div>
</div>
</div>
</div>
Source Code
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<b 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>
</b>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>First Accodion Heading</strong> This is first accodion content.
</div>
</div>
</div>
<div class="accordion-item">
<b 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>
</b>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Second Accodion Heading</strong> This is second accodion content.
</div>
</div>
</div>
<div class="accordion-item">
<b class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</b>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This Accodion Heading</strong> This is thid accodion content.
</div>
</div>
</div>
</div>
Try it yourself
Source Code : Output
Note:In this example, the bootstrap accordion concept is used on the basis of above mention steps.
Add .accordion-flush
to remove the default background color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
General Syntax
<div class="accordion accordion-flush" id="accordionFlushConcept">
<div class="accordion-item">
<b class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</b>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushConcept">
<div class="accordion-body">This is the first item's accordion body content, which is intended to demonstrate the <code>.accordion-flush</code> class.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushConcept">
<div class="accordion-body">This is the second item's accordion body content, which is intended to demonstrate the <code>.accordion-flush</code> class.
</div>
</div>
</div>
</div>
Source Code
<div class="accordion accordion-flush" id="accordionFlushConcept">
<div class="accordion-item">
<b class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</b>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushConcept">
<div class="accordion-body">This is the first item's accordion body content, which is intended to demonstrate the <code>.accordion-flush</code> class.
</div>
</div>
</div>
<div class="accordion-item">
<b class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</b>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushConcept">
<div class="accordion-body">This is the second item's accordion body content, which is intended to demonstrate the <code>.accordion-flush</code> class.
</div>
</div>
</div>
<div class="accordion-item">
<b class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</b>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushConcept">
<div class="accordion-body">This is the second item's accordion body content, which is intended to demonstrate the <code>.accordion-flush</code> class.
</div>
</div>
</div>
</div>
Try it yourself
Source Code : Output
.accordion-flush
class.
.accordion-flush
class.
.accordion-flush
class.
Note:In this example, the bootstrap accordion-flush concept is used to remove the default background color, some borders, and some rounded corners.