How to automatically close all collapsible elements inside the accordion when closing the accordion in CSS
CSS How to Automatically Close All Collapsible Elements Within an Accordion When Closing an Accordion
In this article, we’ll use the Bootstrap 5 Accordion component to demonstrate how to collapse all child accordions within a parent accordion. An accordion is a collapsible component that helps display expandable/collapsed content on a web page.
In this article, we’ll use the Bootstrap 5 Accordion component to display a list of expandable/collapsed elements in a nested fashion. Now, first, we will listen for the “hide” collapse event by attaching an event listener to the parent accordion. After that, when the “hide” collapse event is triggered, we will find all the collapsible elements inside that accordion and therefore remove the “show” class from those elements in order to hide them from the user interface.
Example
Let’s use an example to discuss this method. The following example is
Attach event listeners to the accordion —
"hide.bs.collapse"
Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to automatically close all collapsible elements inside of the accordion when closing the accordion?</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<h3>How to automatically close all collapsible elements inside of the accordion when closing the accordion?</h3>
<div class="accordion">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#parent">
Accordion Item #1
</button>
<div id="parent" class="accordion-collapse collapse show">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#child-one">
Accordion sub-item #1
</button>
<div id="child-one" class="accordion-collapse collapse show">
Accordion sub item 1 - body 1
</div>
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#child-two">
Accordion sub-item #1
</button>
<div id="child-two" class="accordion-collapse collapse show">
Accordion sub item 1 - body 1
</div>
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#child-three">
Accordion sub-item #1
</button>
<div id="child-three" class="accordion-collapse collapse show">
Accordion sub item 1 - body 1
</div>
</div>
</div>
<script>
const parent = document.getElementById('parent')
parent.addEventListener('hide.bs.collapse', function() {
const collapsibleEls = this.querySelectorAll('.collapse.show');
collapsibleEls.forEach(el => {
el.classList.remove('show')
})
})
</script>
</body>
</html>
Summary
In this article, we learned how to automatically close all collapsible elements within an accordion when the parent accordion is closed. We did this by adding This is done using the “hide.bs.collapse” event listener.