Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to automatically close all collapsible elements inside of the accordion when closing the accordion?
We will use the bootstrap accordion component in our article to demonstrate how to collapse all the children's accordions inside the parent accordion. An accordion is a collapsible component that helps to display an expand/collapse type of content on the webpage.
In this article, we will use the Bootstrap 5 Accordion component to display a list of expandable/collapsible elements in a nested fashion. Now, first, we will listen to the "hide" collapse event by attaching an event listener to the parent accordion. After that, when the "hide" collapse event gets fired, we will find all the collapsible elements inside that accordion and consequently, remove the "show" class from the elements so as to hide them in the UI.
Approach
To automatically close all nested collapsible elements, we need to
- Listen for the
hide.bs.collapseevent on the parent accordion - Find all child elements with the
collapse showclasses - Remove the
showclass from each child element
Example
The following example demonstrates how to automatically close nested accordions when the parent accordion is collapsed
<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto-close Nested Accordions</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.nested-accordion {
margin-left: 20px;
border-left: 2px solid #dee2e6;
padding-left: 15px;
}
</style>
</head>
<body>
<div class="container">
<h3>Parent Accordion with Nested Children</h3>
<div class="accordion" id="mainAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#parent">
Main Accordion Item
</button>
</h2>
<div id="parent" class="accordion-collapse collapse show">
<div class="accordion-body">
<p>This is the parent accordion content.</p>
<div class="nested-accordion">
<button class="btn btn-outline-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#child-one">
Child Accordion 1
</button>
<div id="child-one" class="collapse">
<div class="card card-body mb-2">
This is the first child accordion content.
</div>
</div>
<button class="btn btn-outline-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#child-two">
Child Accordion 2
</button>
<div id="child-two" class="collapse">
<div class="card card-body mb-2">
This is the second child accordion content.
</div>
</div>
<button class="btn btn-outline-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#child-three">
Child Accordion 3
</button>
<div id="child-three" class="collapse">
<div class="card card-body">
This is the third child accordion content.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const parent = document.getElementById('parent');
parent.addEventListener('hide.bs.collapse', function() {
// Find all open child collapse elements
const collapsibleEls = this.querySelectorAll('.collapse.show');
// Close each child by removing the 'show' class
collapsibleEls.forEach(el => {
el.classList.remove('show');
});
});
</script>
</body>
</html>
A parent accordion with nested child accordions. When you expand child accordions and then close the main parent accordion, all child accordions automatically close as well. The nested structure is visually indented with a left border.
Key Points
- The
hide.bs.collapseevent fires when the parent accordion starts to close - We use
querySelectorAll('.collapse.show')to find all currently open child elements - Removing the
showclass immediately hides the child accordions - This approach works with any number of nested collapsible elements
Conclusion
By listening to the hide.bs.collapse event on the parent accordion and removing the show class from child elements, we can automatically close all nested accordions when the parent closes. This creates a cleaner user experience by preventing orphaned open child accordions.
2K+ Views
