Carsales UI Styleguide
UI Styleguide
15.kss-section.kss-depth-1

15Accordion

The accordion component used for showing and collapsing content upon user action.

<ul class="module-accordion accordion-with-icon" id="accordion">
  <li class="accordion-group">
    <div class="accordion-header">
      <a href="#acc1" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Heading</a>
    </div>
    <div class="accordion-body" id="acc1">
      <div class="accordion-inner">
        Content
      </div>
    </div>
  </li>
  <li class="accordion-group">
    <div class="accordion-header">
      <a href="#acc2" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Heading</a>
    </div>
    <div class="accordion-body" id="acc2">
      <div class="accordion-inner">
        Content
      </div>
    </div>
  </li>
  <li class="accordion-group">
    <div class="accordion-header">
      <a href="#acc3" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Heading</a>
    </div>
    <div class="accordion-body" id="acc3">
      <div class="accordion-inner">
        Content
      </div>
    </div>
  </li>
</ul>