Prevent panel crashes when a child of a title bar is clicked

Question

I prepared a demo here .

I want to switch the panel body by clicking on the panel title. However, if there are buttons in the title, I would like them to not switch the panel body, how can I do this?

Source:

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>

PS: I apologize if this has already been asked, it is difficult for me to form a headline to find this problem.

Answer 1

$('.panel-heading .btn').click(function (e) {
    e.stopPropagation();
});

Demo

Of course, this may affect the intended function of the button. Explain what he 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 out this script

Example