Newer
Older
dmpopidor / app / javascript / spec / fixtures / accordion.html
<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>