Accordion

Contents

Accordion

Just small polishing over and above the bootstrap defaults. The active state needs the included javascript to work properly.

Accordion group heading (optional)

<section id="section-name" class="accordion">
  <h3 class="accordion-title">Accordion group heading (optional)</h3>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a href="#collapseOne" class="accordion-toggle active" data-toggle="collapse" data-parent="#section-name">This link will toggle the accordion</a>
    </div><!--/accordion-heading-->
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        <p>Content goes here</p>
      </div><!--/accordion-inner-->
    </div><!--/accordion-body-->
  </div><!--/accordion-group-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a href="#collapseTwo" class="accordion-toggle" data-toggle="collapse" data-parent="#section-name">This link will toggle the accordion</a>
    </div><!--/accordion-heading-->
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <p>Content goes here</p>
      </div><!--/accordion-inner-->
    </div><!--/accordion-body-->
  </div><!--/accordion-group-->
</section><!--/accordion-->
<script>
$(function() {
  $('.accordion').on('show', function (e) {
    $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
  });
  $('.accordion').on('hide', function (e) {
    $(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
  });
});
</script>