Accordions are used to present information in a limited amount of space using collapsible content panels.

Example code

Following code uses dark accordion inside left shell.

  <div class="ca-accordion" id="accordionExample">
    <div class="panel">
      <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordionExample" href="#collapseOne"><span class="fa fa-cheveron-down"></span>Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!</a>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordionExample" href="#collapseTwo"><span class="fa fa-cheveron-right"></span>Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</a>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordionExample" href="#collapseThree"><span class="fa fa-cheveron-right"></span>Quick zephyrs blow, vexing daft Jim. Charged fop blew my junk TV quiz.</a>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        </div>
      </div>
    </div>
  </div>