Disable crash for link in data toggle

Question

I have a folding body of a panel like this ( fiddle that now has fixed code):

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title" data-toggle="collapse" href="#collapseOne">
            <a href="#">1) collapsing link</a>
            <a href="#">2) not collapsing link</a>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">Anim pariatur cliche ...</div>
    </div>
</div>

The data switch is set on the panel title because I want to click anywhere to open another panel. Except the second link. My goal is to disable collapsing behavior for the second link. What is the best / easiest way to achieve this?

It is important . I do not want to set the data switch only on the first link. I want to click anywhere in the panel to call even, except for the second link.

Answer 1

, , javascript. ... .

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title" data-toggle="collapse" href="#collapseOne">
            <a href="#">1) collapsing link</a>
            <a href="#" class="no-collapsable">2) not collapsing link</a>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">Anim pariatur cliche ...</div>
    </div>
</div>

:

$('.no-collapsable').on('click', function (e) {
    e.stopPropagation();
});