Nested collapses calling parent collapse every time

Question

I've searched and found a few similar answers - but those were surrounding accordions which I am not using.

I have nested collapse items as seen in this codepen

$('#collapseOutter').on('show.bs.collapse', function(event) {
  $('#collapseBtn').html("Show Less");
  console.log('Only happen when outter div is opened');
  event.stopPropagation();
  console.log('even with stopping propagation it fires');
})
$('#collapseOutter').on('hide.bs.collapse', function() {
  $('#collapseBtn').html("Show More");
  console.log('Only happen when outter div is collapsed');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row ml-4">
    <div class="row header-div">
      <a id="collapseBtn" class="btn-info btn" data-toggle="collapse" href="#collapseOutter" role="button" aria-expanded="false" aria-controls="collapseOutter">
    Show More
  </a>
    </div>
  </div>
  <div class="row ml-4">
    <div id="collapseOutter" class="collapse">
      <p>Here is a paragraph about the data you're about to see.</p>
      <div class="row">
        <div id="item-a">
          <a id="item-a" class="" data-toggle="collapse" href="#collapseInnerA">
      Item One of a list
     </a>
          <br />
          <div id="collapseInnerA" class="collapse">
            <div class="row">
              <p class="ml-4">Item One Related Information</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div id="item-b">
          <a id="item-b" class="" data-toggle="collapse" href="#collapseInnerB">
      Item Two of a list
     </a>
          <br />
          <div id="collapseInnerB" class="collapse">
            <div class="row">
              <p class="ml-4">Item Two Related Information</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When I click on the items in the list (which is inside the 1st collapse) it causes the parent methods to fire.

How do I prevent the parent methods from firing when I click on the list items to collapse/show their information?

I'm looking to see how I can do this relating to bootstrap specifically.

Possible duplicate of [How to stop events bubbling in jQuery?](https://stackoverflow.com/questions/4522257/how-to-stop-events-bubbling-in-jquery) — peeebeee, Aug 14 '18 at 14:11
Again - I've searched. I see it's called 'event bubbling', but that doesn't help me with how to resolve my issue related to Bootstrap and collapsing. That link you gave is for custom functions - how would I do that with default Bootstrap functions? — Hanny, Aug 14 '18 at 14:13
Can you not use `event.stopPropagation()` in your event functions? — peeebeee, Aug 14 '18 at 14:18
I've included that in the `.on('show.bs.collapse')` function and it doesn't do anything. I will edit to show - I have included that in the show function and it still fires off. — Hanny, Aug 14 '18 at 14:19
I see I can add a class to the inner elements now - and use that `stopPropagation` when I call `show` and `hide` on the class applied to the inner elements. It seems to do the trick. Thank you! — Hanny, Aug 14 '18 at 14:23

score 7 · Accepted Answer · answered Aug 14 '18 at 14:26

You are stopping the event propagation when it reaches the outer collapse. You should stop it on the inner collapses. In this codepen, the first inner collapse's collapse event will bubble while the second is stopped.

$('#collapseInnerB').on('show.bs.collapse', function( event ) {
    event.stopPropagation();
})
$('#collapseInnerB').on('hide.bs.collapse', function( event ) {
    event.stopPropagation();
})

Nested collapses calling parent collapse every time

1 Answers1