Bootstrap: Cancel data-toggle=“collapse” on nested button

Question

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>