I have a nested Bootstrap Collapse with a shown event firing on both the parent and the child Collapse. I need it to only fire on the parent Collapse and not on the child.

$(document).ready(function() {
  $("#accordion2").on("shown",function() {
    alert("shown!");  
  });
});

Here's an example: /

I have a nested Bootstrap Collapse with a shown event firing on both the parent and the child Collapse. I need it to only fire on the parent Collapse and not on the child.

$(document).ready(function() {
  $("#accordion2").on("shown",function() {
    alert("shown!");  
  });
});

Here's an example: http://jsfiddle.net/xb9K6/

• javascript
• jquery
• twitter-bootstrap

• 2 I have a similar issue. I have nested collapse elements, and when I collapse the child, the .show() event triggers on the parent as well. I tried stopPropogation() with no luck. Any ideas? – Jo Sprague Commented Jun 28, 2013 at 14:01

1 Answer 1

You can use stopPropagation method of the event object.

$(".accordion").on("shown",function(event) {
    event.stopPropagation();
});

http://jsfiddle.net/SPZZv/