- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Example
Let’s discuss the approach with an example, below −
Event Listener to attach 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>
Conclusion
In this article, we learned how to automatically close all the collapsible elements inside of the accordion when closing the parent accordion, and we achieved this by adding the “hide.bs.collapse” event listener on the parent collapsible element.
To Continue Learning Please Login
Login with Google