Prevent panel collapse on heading child element click

Question

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.

Answer 1

$('.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.

Answer 2

You might want to use stopPropagation

And use javascript to achieve it:

window.noCollapse = function(e) {
    e.stopPropagation();
}

Check this fiddle

Example