Bootstrap: Cancel data-toggle=“collapse” on nested button
288
November 22, 2016, at 2:36 PM
I want my panel-collapse to collapse when the panel-heading is clicked but not when the button in the panel-heading is clicked.
My code:
<div class="panel panel-default">
<div class="panel-heading clearfix" data-toggle="collapse" href="#collapseBody">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">Body</h4>
<div class="btn-group pull-right">
<!-- The problematic button -->
<a href="#" class="btn btn-default">Button</a>
</div>
</div>
<div class="panel-collapse collapse in" id="collapseBody">
<div class="panel-body" id="body">
</div>
</div>
</div>
What i've tried:
I tried to add
<script>
$('.btn').on('click', function (e) {
e.stopPropagation();
});
</script>
But without any effect.
Can someone please help out a beginner? (:
Answer 1
adeneo gave the golden tip in his comment.
Fix:
<script>
$( document ).ready(function() {
$('.btn').on('click', function (e) {
e.stopPropagation();
});
});
</script>
-
12:40
-
05:30
-
05:10
-
9:40
-
4:50
-
11:30
How to prevent a token created with OAuth 2.0 from expiring?
-
08:00
-
05:10
-
6:30
POPULAR ONLINE
- search for elements in a list 110477 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 105056 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98144 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 95619 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 91863 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 61304 visits
- Adding methods to es6 child class 22012 visits
![JQuery Show / hide images in list one at the time [closed]](https://cmsdk.com/images/nophoto.png "JQuery Show / hide images in list one at the time [closed]")