Bootstrap accordion provides easy way to handle a informative webpage that includes lots of paragraph. This includes documentation page, FAQ page etc. This way user can only see the content that need to show and other information remain hidden. Bootstrap accordion works same as collapse.
in this article, we will see how to create accordion in Bootstrap and customize.
Here is the example of Bootstrap accordion.
<!doctype html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center m-3">Bootstrap Accordion</h1>
<div class="container">
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="one">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one">
Accordion 1
</button>
</h2>
<div id="collapse-one" class="accordion-collapse collapse show" aria-labelledby="one" data-bs-parent="#accordion">
<div class="accordion-body">
<p>This is accordion body.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="two">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="false" aria-controls="collapse-two">
Accordion 2
</button>
</h2>
<div id="collapse-two" class="accordion-collapse collapse" aria-labelledby="two" data-bs-parent="#accordion">
<div class="accordion-body">
<p>This is accordion body.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="three">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-three" aria-expanded="false" aria-controls="collapse-three">
Accordion 3
</button>
</h2>
<div id="collapse-three" class="accordion-collapse collapse" aria-labelledby="three" data-bs-parent="#accordion">
<div class="accordion-body">
<p>This is accordion body.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Add accordion-flush class to remove the default background color, some borders etc. to render accordions with their parent container.
Remove data-bs-parent attribute on each accordion-collapse class to make accordion items stay open when another item is opened.
If you want the accordion item is open by default, the attribute on the control element should have a value of aria-expanded="true".
If you want to change icon for open and close accordion arrow, i.e., plus and minus icon instead of arrow, you can add the below CSS in it. Here is the example for custom icon.
/*collapsed icon*/
.accordion-button::after {
background-image: url("https://hackthestuff.com/assets/images/logo.png");
}
/*openned icon*/
.accordion-button:not(.collapsed)::after {
background-image: url("https://b.stripecdn.com/docs/assets/6bf407479706b31fa82c548be63edc52.png");
}
I hope it will help you.
