CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
dbn
dbn

Reputation: 13930

How can I skip triggering bootstrap collapse when clicking on link within collapse element?

I am using the Twitter Bootstrap collapse function to hide a table row. I also have a link in the text within the span that triggers the collapse/expand. Unfortunately, when I click on the link, the collapsed text is first expanded, and then the link is followed.

I'd like to be able to skip triggering the collapse toggle when clicking on the link. Here's some code that demonstrates the issue (live jsfiddle example here):

<table class="table">
    <tr data-toggle="collapse" data-target="#collapseRow1" style="cursor: pointer;">
        <td>Click me to show more!</td>
        <td><a href="http://getbootstrap.com/css/">but don't expand after clicking this link</a></td>
    </tr>
    <tr class="collapse" id="collapseRow1">
        <td>hidden content1</td>
        <td />
    </tr>
</table>

Upvotes: 3

Views: 3479

Answers (2)

Mihnea Belcin
Mihnea Belcin

Reputation: 554

you can add a class on the link <a class="outsidelink" href="http://getbootstrap.com/css/"> and then inside the js do something like this 

$(".outsidelink").on('click', function (e) { e.preventDefault(); })

EDIT: as pointed by @MustDie1Bit preventDefault() blocks all . you can use e.stopPropagation(); instead

Upvotes: 1

MustDie1Bit
MustDie1Bit

Reputation: 561

Use event.stopPropagation() at click event.

http://api.jquery.com/event.stoppropagation/

$("table.table td a").on('click', function (e) { e.stopPropagation(); })

To understand why event bubbling up the DOM tree please read http://api.jquery.com/category/events/event-object/

Upvotes: 9

Related Questions