Is there a way to prevent bootstrap collapse from being triggered when clicking on a link inside the collapse element?

Question

Is there a way to prevent bootstrap collapse from being triggered when clicking on a link inside the collapse element?

Utilizing the Twitter Bootstrap collapse feature to conceal a table row. The issue arises when there is a link within the text that triggers the collapse/expand behavior. Upon clicking the link, the collapsed text first expands and then the link is followed.

To resolve this problem, I am looking for a way to prevent the collapse toggle from being triggered when clicking on the link. Below is an example code snippet showcasing the problem (view 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>

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Prevent event propagation by using event.stopPropagation() when handling click events.

Learn more about event.stopPropagation()

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

To gain insight into why events bubble up the DOM tree, refer to this resource

Answer 2

Prevent event propagation by using event.stopPropagation() when handling click events.

Learn more about event.stopPropagation()

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

To gain insight into why events bubble up the DOM tree, refer to this resource

Answer 3

Answer №2

If you want to designate a link as an outside link, you can simply add a class to the anchor tag like this:

<a class="outsidelink" href="http://getbootstrap.com/css/">

. Then in your JavaScript code, you can handle it like so:

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

UPDATE: An important note from @MustDie1Bit - using preventDefault() will block all events. You may use e.stopPropagation(); instead.

Answer 4

If you want to designate a link as an outside link, you can simply add a class to the anchor tag like this:

<a class="outsidelink" href="http://getbootstrap.com/css/">

. Then in your JavaScript code, you can handle it like so:

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

UPDATE: An important note from @MustDie1Bit - using preventDefault() will block all events. You may use e.stopPropagation(); instead.

Is there a way to prevent bootstrap collapse from being triggered when clicking on a link inside the collapse element?

Answer №1

Answer №2

Similar questions

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

top technique for displaying videos and images in a lightbox

Why does the Node.js REST API keep throwing errors after I try to create just one record?

How to dynamically load content with jQuery when the back button is triggered

Tips on incorporating personalized javascript functions into Durandal

Discovering the X and Y coordinates on a Half Doughnut Chart using Chart JS in React

What is the method to spin an item in three js while keeping its axis in focus?

The chosen Material UI tab stands out with its distinct color compared to the other tabs

Achieving sliders similar to those in the "level" window of GIMP can be done by customizing the shape of GtkScale in your C program

Setting a background-image using jQuery in Codeigniter can be done by following these steps

JavaScript function to identify and highlight duplicate values within rows

Showcasing a dynamically created JSON document on a basic web page

Incorporating images with JavaScript in Jade templates

The Android WebView experiencing issues with the functionality of the Hamburger Menu

When attempting to PUT a JSON object to a specific URL, an error occurs

Tips for choosing and controlling Google Maps markers using their unique identifiers (V3 JS API)

What is the preferred method for $_POST to handle multiple parameters when they are passed as a single string?

Tips for sending refs to components that load lazily

Using the useState() hook with a component as an argument

Progress bar designed for simultaneous ng-apps on a single webpage in Angular