Menu
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.
491
The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
To make an animated collapsible, add max-height: 0 , overflow: hidden and a transition for the max-height property, to the panel class.
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0 .
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();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
