How can I collapse all nested elements with parent?-CodePudding

I've got a collapse element with some nested collapse elements inside it.

I'm trying to ensure that when the parent element collapses, the internal nested item does too. The nested item does appear to collapse when looking at it, but when I re-open the parent, the nested item is not collapsed.

I've added the data-bs-parent attribute but that doesn't seem to have an effect.

Is there an obvious reason why?

I've reproduced the example here - https://codepen.io/s89_/pen/vYamvzg

<div  role="button" data-bs-toggle="collapse"
     data-bs-target="#module-test" aria-expanded="false" aria-controls="module-test">
  <h2>
    <div>
      <div><h3>Collapse</h3></div>
    </div>
  </h2>
  <div id="module-test" >
          <div  data-permissions-collapse-target="group"
           role="button" data-bs-toggle="collapse" data-bs-target="#group-test_events" aria-expanded="false"
           aria-controls="group-test_events" data-bs-parent="#module-test">
        <h2>
          <div>
            <div><h3>Nested collapse item</h3></div>
          </div>
        </h2>
        <div id="group-test_events" >
          <div >
            Nested collapse contents
          </div>
        </div>
      </div>
  </div>
</div>

CodePudding user response：

You just need to use JavaScript (Bootstrap 5 doesn't use jQuery) to close the children as the data-bs-parent attribute won't work for this behavior...

const myCollapsible = document.getElementById('module-test')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
   // close children
   event.target.querySelectorAll('.collapse').forEach(element => {
       const bc = bootstrap.Collapse.getOrCreateInstance(element)
       bc.hide()
   })
})

https://codeply.com/p/mJYXqUDGm6

CodePudding user response：

Bootstrap 5 - Collapse (auto-collapse descendents)

First of all I slightly modified your html to make it more simple.

Collapse toggle:

This is a collapse toggle:

<div  data-bs-toggle="collapse" data-bs-target="#item">

Having the attributes data-bs-toggle and data-bs-target respectively to make it a collapse toggle and to define the target selector of the corresponding collapse content.

I also set the custom class collapse-toggle to have a criteria to select elements being toggles.

Collapse content:

This is a collapse content:

<div id="content" >

Having first of all an id set so that the toggle will have a criteria for his target selector. I tried to use :scope * to target the next sibling but it didn't work. The closest solution to address an element not using its id was here (https://stackoverflow.com/a/12809794/1221208).

The class collapse tells I want that element collapsed by default.

I also set the custom class collapse-content to have a criteria to select elements being content.

Auto-collapse the descendents via js - event hidden.bs.collapse

Then to perform the auto-collapsing of descendents of the content being currently collapsing, I used the js approach on the hidden.bs.collapse event as described here (https://getbootstrap.com/docs/5.0/components/collapse/#methods)

//add the hidden.bs.collapse event listener to each .collapse-content
$('.collapse-content').on('hidden.bs.collapse', function() {  
  //find the descendents having the class .collapse-toggle and for each one of them
  $(this).find('.collapse-toggle').each((i, o) => {      
    //collapse hide the element next to the toggle
    //!a stricter criteria hitting the .collapse-content class could be better here
    $(o).next().collapse('hide');
  })
})

.collapse-toggle {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<div>
  <!-- toggle 1 -->
  <div  data-bs-toggle="collapse" data-bs-target="#item">
    <h3>Main Parent</h3>
  </div>
  <!-- content 1 -->
  <div id="item" >
    <!-- toggle 2 -->
    <div  data-bs-toggle="collapse" data-bs-target="#content">
      <h3>Nested collapse item</h3>
    </div>
    <!-- content 2 -->
    <div id="content" >
      <p>Nested collapse contents</p>
    </div>
  </div>
</div>