Bootstrap Collapse - несколько кнопок - скрыть не работает

Question

У меня есть страница с двумя столбцами, HTML5/Bootstrap, столбцы, растянутые на всю высоту страницы. В правом столбце я пытаюсь создать сворачиваемую группу btn - каждый раз, когда вы нажимаете на кнопку, целевой текст сжимается (это работает отлично), и если я нажимаю ту же кнопку, скрытый целевой текст (отлично работает).

Но если я нажму кнопку «свернуть кнопку» после того, как я открою первый целевой текст, то, чем тот, который я щелкнул, чтобы открыть первый целевой текст, назовем его # target1 - и показать, как <div> s, # target1 и target # 2. Но я хочу, чтобы # target1 скрывался и # target2 отображался.

Это код, у меня есть:

<div id="right" class="col-sm-6 stretch-height" > 
     <div id="menurow" class="row"> 
     <div id="icnavbar" class="col-sm-12 nopadding text-center"> 
     <div class="btn-group menugroup"> 
     <button data-toggle="collapse" data-target="#target1" class="btn-link"><img class="icmenu spin img-responsive" src="./img/ic_twitter.png" alt="follow us on twitter"/></button> 
     <button data-toggle="collapse" data-target="#target2" class="btn-link"><img class="icmenu spin img-responsive" src="./img/ic_mail.png" alt="contact us"/></button> 
    </div><!-- end btn-group menu--> 

<div id="target1" class="collapse"> 
Some content 1 
</div> 
<div id="target2" class="collapse"> 
</div><!-- end contactform div --> 
Some content 2 
</div> 

</div><!-- end menu div--> 
</div><!--end menurow--> 
    </div><!--end right div--> 

Answer 1

Диего, я не уверен, но вы можете попробовать распространения imediate стоп как в этом примере: https://jsfiddle.net/bdd6xt1b/20/

 $("body").on("click", "#teste", function(e) { 
    alert("YOU SHALL NOT PASS!!!!!!!!!!!!"); 
    e.stopImmediatePropagation(); 
}); 

$("body").on("click", "#teste", function() { 
    alert("nao executar isto"); 
});