Bootstrap Collapse Plugin allows you to toggle the visibility of

Is there a way for all the multicollapses to automatically close when a new one is opened? I specifically want the "Accordion Item # 2.1" to collapse when I click on "Accordion Item # 1" or "Accordion Item # 3". Currently, my code only closes "Accordion Item # 2" but not the nested accordion within it.

  <div class="accordion" id="accordionExample">  
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> 
      </div>
    </div>
  </div>   
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> 
        <div class="accordion-item">
    <h2 class="accordion-header" id="hThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cThree" aria-expanded="false" aria-controls="cThree">
        Accordion Item #2.1
      </button>
    </h2>
    <div id="cThree" class="accordion-collapse collapse" aria-labelledby="hThree">
      <div class="accordion-body">
      CIAO
      </div>
    </div>
  </div>
      </div>
    </div>
  </div>  
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> 
      </div>
    </div>
  </div>   
</div>

htmlcssaccordionbootstrap-5

Answer №1

To effectively manage this, utilizing Javascript is essential. Initially, identify all elements with the class .collapse and then associate them with the hidden.bs.collapse event. Upon each accordion being hidden, inspect for any active child elements with the class .collapse.show. For each active child found, access the Bootstrap Collapse instance and execute the hide() method.

let collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
let collapseList = collapseElementList.map(function (collapseEl) {
    collapseEl.addEventListener('hidden.bs.collapse', function () {
        let children = this.querySelectorAll('.collapse.show');
        children.forEach((c)=>{
            let collapse = bootstrap.Collapse.getInstance(c)
            collapse.hide()
        })
    })
})

See the demonstration here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When I trigger a function by clicking, I also set a timeout of 1 second. Is it possible to deactivate this timeout from within the function itself?

One button triggers a function with a timeout that repeats itself upon clicking. Here's the code snippet: function chooseNum() { let timeout = setTimeout(chooseNum, 1000); } To disable this repeating function, I attempted another function like so ...

javascripthtml

Ways to determine the position of elements when they are centered using `margin:auto`

Is there a more efficient way to determine the position of an element that is centered using CSS margin:auto? Take a look at this fiddle: https://jsfiddle.net/vaxobasilidze/jhyfgusn/1/ If you click on the element with the red border, it should alert you ...

javascriptjqueryhtmlcss

Mix div borders with varying border radius for child elements

I'm currently working on a project that involves creating border lines between divs to achieve a design similar to the one shown in this design jpeg. However, I've only managed to reach an output jpeg where the merging is not quite right. The C ...

cssreactjsresponsive-designstyled-componentsborder-radius

Sending information to other domains and managing the feedback

As a newcomer to Jquery, I am attempting to send data to a cross-domain and need to manage the response, which is a complete HTML page. Here is the code snippet I am using: $.ajax({ url: "http://www.somehost.com/abc/xyz.php", type: "post", d ...

jqueryhtmlajaxpost

Count characters in multiple text inputs with AngularJS

Currently, I am developing an Angular JS application with the help of Angular-UI (bootstrap). In this app, there are multiple input boxes where users can enter data, which is then displayed in a div. My goal is to have a character count that applies to al ...

htmlangularjstwitter-bootstrap

Graphic created using CSS content generation code

While browsing a website, I came across some intriguing elements and decided to investigate further. Here is what the element looked like: Upon examining the CSS definition: .entry-meta .date a:before { content: "\f303"; } I am aware that image ...

htmlcss

Change the background color of a table cell based on its value with the help of JavaScript

I am attempting to apply color to cells in an HTML table (generated automatically by Python and Django) based on the content of the cells. Below is my table. I want to specifically color the column "status". Whenever the word "Cloture" appears, I would li ...

javascripthtmlhtml-tabledjango-formsdjango-templates

The submenu background and text CSS are out of alignment

Within the main navigation of our Wordpress website, built using the Divi Page Builder, there are two submenus. The issue arises when hovering over the main navigation item and then leaving the submenu - at that point, both the background and the text disa ...

htmljquerycsswordpressdivi

Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over. I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm ...

jqueryhtmlcssanimation

CSS Grid ensures uniformity in the spacing between columns

Is there a way to ensure the spacing between items is consistent? I attempted to use grid-column-gap, but the gap varies because the number of items on each row differs. The first and third rows have a larger gap compared to the second row, which has the ...

css

Optimize the size of div elements using jQuery

I am looking for a way to minimize certain div elements on my webpage using symbols from font-awesome instead of the traditional "-" and "+". However, I am having trouble inserting the classes of the icons into my code. I attempted replacing the .html meth ...

jqueryhtmlminimize

Discrepancy in Line Spacing in Internet Explorer 9 when Working with TextAreas

My TEXTAREA requires precise spacing, so I've set the formatting as shown below: TEXTAREA { font-family: Tahoma, Arial; font-size: 8pt; letter-spacing: 0px; line-height: 13px; } The issue arises when typing text into the textarea - the li ...

htmlcssinternet-explorerbrowsertextarea

Tips for CSS and jQuery: Show link when hovered over and switch the visibility of a content div

I'm facing an issue with a link in the horizontal navigation bar. When a user hovers over it, I want another div to slide down just below it. The problem is that using the .toggle method doesn't work as expected. It continuously toggles the div e ...

jquerycss

Return to the previous URL after executing window.open in the callback

I need help redirecting the callback URL back to the parent window that initially called window.open. Right now, the callback URL opens inside the child window created by the parent. Here's the scenario: The Parent Window opens a child window for aut ...

javascripthtmlangularjs

Adding an additional border when combining two divs with rounded borders

I attempted to create a design similar to the Instagram "ask me a question" box, but I am encountering an issue where there is some extra border around the title when the two divs merge. What am I doing incorrectly? .info { overflow: hidden; ...

htmlcssborderborder-radius

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... https://i.sstatic.net/We7Ua.png Unfortunately, the assigned value does not show on the front end. I ...

javascriptjqueryhtmljquery-uidatepicker

Sass flex order has no effect on elements that are generated

I encountered an issue with the rendering of SVGs in my project. Currently, they are displayed correctly in desktop mode, but in mobile portrait mode, I need to change the order of one specific SVG element within the row. To achieve this, I decided to use ...

cssreactjssvgsassflexbox

Styling Your Website: Embrace CSS or Stick with Tables?

My goal is to create a layout with the following features, as shown in the screenshot: The main features include: The screen is divided into 3 regions (columns); The left and right columns have fixed widths; The middle column expands based on the browse ...

htmlcss

What is the functionality of `first-child` when used with custom variants in Tailwind CSS?

I've been wrestling with understanding the first-child pseudo selector and after studying through this interactive example, I'm feeling quite bewildered. <div class="[&:first-child]:text-red-500"> <ul> <li>ab ...

csstailwind-css

Fixed position of the rotated button placed at a 90-degree angle on the right side of the screen

Recently, I had a project where I had to include a div that was rotated 90 degrees and fixed to the right side of the screen. The challenge was making sure that as you scrolled down, the button moved along with the screen while maintaining responsiveness. ...

htmlcssbootstrap-4responsive-design