As mentionned in a similar question Here, simply change your href by the data-target attribute

<div class="panel-group" id="accordion">  <div class="panel panel-default">    <div class="panel-heading">      <h4 class="panel-title">        <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">          Expand        </a>      </h4>    </div>    <div id="collapseOne" class="panel-collapse collapse in">      <div class="panel-body">        ...      </div>    </div>  </div></div>

You can use the accordion directive from AngularJS UI Bootstrap that builds on top of twitter bootstrap the collapse directive.

example:

 <accordion >    <accordion-group heading="Static Header, initially expanded" is-open="true">      This content is straight in the template.    </accordion-group> </accordion>

Live example: http://jsfiddle.net/choroshin/U89bW/3/

I had the same issue, and I didn't want to add an additional library beyond bootstrap. As recommended, you can usedata-target="#your-collapsing-element", removing the href attribute completely.

The basics

To make a panel collapse you need:

1. On the element used to trigger collapse:

   data-toggle="collapse" data-target="#my-collapsing-element"

2. On the element that collapses:

   id="my-collapsing-element"

3. On the element wrapping both the "trigger" element and the collapsing element:

   class="panel"

Putting it all together

You can optionally add parent elements to make it part of a group, and add add the css classes "collapse in" to the collapsing element to make its default state closed. A full example:

<div id="accordion">    <div class="panel">        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">            Heading 1        </a>        <div id="collapse1">            Content for panel 1        </div>    </div>    <div class="panel">        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">            Heading 2        </a>        <div id="collapse2" class="collapse in">            Content for panel 2        </div>    </div></div>

You can get better button behaviors by using a <button> element rather than an <a>. Overriding bootstrap's styling for .panel can be done by adding your own styling for the panel css class.

<div class="panel its-my-panel">

.panel.its-my-panel {  margin-bottom: 0;  background-color: transparent;  border: none;  border-radius: 0;  -webkit-box-shadow: none;  box-shadow: none;}

.my-panel-heading {  cursor: pointer;}/* Overrides for .panel--theonly required bootstrap class */.panel.my-panel-overrides {  margin-bottom: 0;  background-color: transparent;  border: none;  border-radius: 0;  -webkit-box-shadow: none;  box-shadow: none;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><div id="accordion">  <div class="panel my-panel-overrides">    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">        Collapsible Group 1</a>    <div id="collapse1" class="collapse in">      Content for panel 1    </div>  </div>  <div class="panel my-panel-overrides">    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">        Collapsible Group 2</a>    <div id="collapse2" class="collapse">      Content for panel 2    </div>  </div>  <div class="panel my-panel-overrides">    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">        Collapsible Group 3</a>    <div id="collapse3" class="collapse">      Content for panel 3    </div>  </div></div>