<div id="accordion-tester">
<!-- accordion expand/collapse all controls -->
<div class="accordion-controls" data-parent="accordion">
<a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
<span>|</span>
<a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
</div>
<!-- Standard Bootstrap 3.x accordion -->
<div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingA">
<h2 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="accordion" href="#collapseA" aria-controls="collapseA" aria-expanded="false">
Section A
<span class="fa fa-plus" aria-hidden="true"></span>
</a>
</h2>
</div>
</div>
<div id="collapseA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingA">
<div class="panel-body">
This is test section A.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingB">
<h2 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="accordion" href="#collapseB" aria-controls="collapseB" aria-expanded="false">
Section B
<span class="fa fa-plus" aria-hidden="true"></span>
</a>
</h2>
</div>
</div>
<div id="collapseB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB">
<div class="panel-body">
This is test section B.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingC">
<h2 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="accordion" href="#collapseC" aria-controls="collapseC" aria-expanded="false">
Section C
<span class="fa fa-plus" aria-hidden="true"></span>
</a>
</h2>
</div>
</div>
<div id="collapseC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingC">
<div class="panel-body">
This is test section C.
</div>
</div>
</div>
</div>