About Lesson
Accordion (Multiple Collapse Sections)
- .accordion → Wrapper for multiple collapsible items
- .accordion-item → A single collapsible item
- .accordion-header → Title of the collapsible section
- .accordion-button → Button to expand/collapse content
- .accordion-collapse → Defines collapsible content
- data-bs-parent=”#id” → Ensures only one section opens at a time
Example: Basic Accordion
HTML
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Section 1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for section 1.
</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="#collapseTwo">
Section 2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for section 2.
</div>
</div>
</div>
</div>
Explanation:
- Only one section expands at a time due to data-bs-parent=”#accordionExample”.
- collapse show keeps the first section open by default.
Output:
