Accordion and Collapse
4 min read Quiz at the end
Build an accordion with Collapse: one open panel at a time using data-bs-parent.
Accordion and Collapse
<!-- Accordion -->
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#faq1">
What is Bootstrap?
</button>
</h2>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body">Bootstrap is a CSS framework.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#faq2">
Is Bootstrap free?
</button>
</h2>
<div id="faq2" class="accordion-collapse collapse">
<div class="accordion-body">Yes, MIT licensed.</div>
</div>
</div>
</div>
Topic Quiz · 1 questions
Test your understanding before moving on
1. What does data-bs-parent="#id" do in an accordion?
💡 data-bs-parent makes the accordion collapse other panels when one opens.