Automatically Close Collapsible Elements in 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 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.

Updated on: 2023-02-22T11:32:25+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements