Question

129

Disable collapse for link in a data-toggle element

rated 0 times [ 134] [ 5] / answers: 1 / hits: 26146 / 10 Years ago, mon, june 9, 2014, 12:00:00

I have a collapsing panel body, like this (the fiddle, which now has the 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-toggle is set on the panel title, because I want a click anywhere on it to open the other panel. Except the second link. My goal is to disable the collapsing behavior for the second link. What is the best/simplest way to achieve that?

Important: I do not want to set the data-toggle on the first link only. I want a click anywhere on the panel to trigger the even, except on the second link.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

georginat

Add To Favorites

Follow

Total Points: 656

Total Questions: 107

Total Answers: 108

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

answered 10 Years ago jaelyn · Accepted Answer

You need to add a class for those elements that you don't want to fire the collapse event and then stop the event propagation via javascript. So... here is the correct answer.

<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>

Stop the event propagation like this:

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

    e.stopPropagation();

});