Bootstrap accordion

Question

I am using the transition.js plugin for bootstrap to make an accordion.

Now I want the whole panel-heading to trigger the expansion and collapsion of the element that's why I moved the a -tag outside of it.

So far this works fine but now I also have a button on the panel-heading which should not trigger the expansion. How can I accomplish that?

<div class="panel panel-default">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#gameslist" href="#collapse1">
    <div class="panel-heading row">
      <div class="col-xs-4">
        <div class="panel-title">Title</div>
      </div>
      <div class="col-xs-4">
        <button type="button" class="btn btn-danger btn-xs">This button should not trigger the accordion</button>
      </div>
    </div>
  </a>
</div>

Answer 1

You can stopPropagation to prevent the click event from being sent to the header element.

$('.accordion-toggle button').click(function(e){
  e.preventDefault();
  e.stopPropagation();
});

I have made a demo here