I have prepared a demo here.
I want to toggle the panel body by clicking on the panel heading. However if there are buttons in the heading, I would like them to not toggle the panel body, how can I do this?
Source code:
HTML
<div class="panel panel-default">
<div class="panel-heading clearfix" data-toggle="collapse" data-target="#body">
<span>Text</span>
<button class="btn btn-default pull-left">Button</button>
</div>
<div class="panel-body collapse" id="body">
asd
</div>
</div>
P.S.: I apologize if this has been asked already, it's hard for me to form a title to find this problem.
$('.panel-heading .btn').click(function (e) {
e.stopPropagation();
});
Demo
Of course, this could affect the intended function of the button as well. Explain what it will do for a better answer.
You might want to use stopPropagation
And use javascript to achieve it:
window.noCollapse = function(e) {
e.stopPropagation();
}
Check this fiddle
Example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With