How can I prevent the nested drop element Bootstrap.show () in the parent?

Question

Here is the jsfiddle of my setup;

http://jsfiddle.net/7LBr5/1/

You will notice that I have indicator arrows on the parent accordion and a function that toggles them when the accordion shows and hides. The problem is that the internal collapse regions (used to hide product information) trigger a function that switches the arrows on the parent object. It seems that the .show () event should fire on the parent collapse element when the child is actually collapsing.

How can I fix this so that the failure of the child does not switch the arrows on the parent?

Here is the code for my function;

$('.collapse').on('show', function(){ $(this).parent().find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");}).on('hide', function(){ $(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");}); 

Answer 1

Simply stop the parent from playing the event when the event.stopPropagation button is event.stopPropagation so that it does not trigger a click event on the accordion after the click event on the button is executed.

 $thisButton.click(function(e) { e.stopPropagation(); //.. Code follows 

Demo

In addition, you do not need to execute each of the selectors to bind the click event, instead just specify the selector for the click event itself

 $(".btn-switch").click(function (e) { e.stopPropagation(); var $thisButton = $(this); $thisButton.toggleClass("btn-primary btn-danger"); if ($(this).hasClass('btn-danger')) { $thisButton.html('<i class="icon-remove-circle icon-white"></i> Remove'); $(this).parents('.thumbnail').find('.rental-count').val('1'); $(this).parents('.thumbnail').find('input').change(); } else { $thisButton.html('<i class="icon-ok-circle icon-white"></i> Add to Quote'); $(this).parents('.thumbnail').find('input').val(''); $(this).parents('.thumbnail').find('input').prop('checked', false); $(this).parents('.thumbnail').find('input').change(); } }); 

Answer 2

The best way is to use

 $(".btn-switch").click(function (e) { //you code return false; });