Bootstrap Nested Collapse With Events Only On Parent Collapse

Question

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/

Answer 1

You can use stopPropagation method of the event object.

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

http://jsfiddle.net/SPZZv/