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>
READ ALSO
JQuery Show / hide images in list one at the time [closed]

JQuery Show / hide images in list one at the time [closed]

I have an list with banner images. .

272
on click call hover/mouse

on click call hover/mouse

I have fixed sidebar navigation bar, it works on hover but I want to open first menu by clicking on collapse button. similar working like hover on menu 1.

337
How to only allow one toggle div to be shown at a time

How to only allow one toggle div to be shown at a time

I am wondering how I would make this where you can only select one at a time. Please keep in mind this is for Wordpress.

317
Simplify a active menu jQuery code

Simplify a active menu jQuery code

I would like to simplify this code:.

326