causeway-standard-theme/causeway/docs/components/accordion.html

<div class="container page shell-left-navigation">
  <div class="navigation-pane-left">
    <div class="navigation-content-wrapper">
      <div class="navigation-header">
        <h2>Accordion - Example</h2>
      </div>
      <div class="navigation-content">
        <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-chevron-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-chevron-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-chevron-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>
      </div>
    </div>
  </div>
  <div class="divider divider-navigation"><span class="handle"></span></div>
  <div class="navigation-pane-right">
    <div class="pane">
      <a id="accordion"></a>
      <header class="content-header">
        <h1 class="title">
          Accordion
        </h1>
      </header>
      <section>
        <p>Accordions are used to present information in a limited amount of space using collapsible content panels.</p>

        <br/>
        <h3 class="title">Example code</h3>
        <p>Following code uses dark accordion inside left shell.</p>
<pre><code>
  &lt;div class=&quot;ca-accordion&quot; id=&quot;accordionExample&quot;&gt;
    &lt;div class=&quot;panel&quot;&gt;
      &lt;div class=&quot;panel-heading&quot;&gt;
        &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordionExample&quot; href=&quot;#collapseOne&quot;&gt;&lt;span class=&quot;fa fa-cheveron-down&quot;&gt;&lt;/span&gt;Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id=&quot;collapseOne&quot; class=&quot;panel-collapse collapse in&quot;&gt;
        &lt;div class=&quot;panel-body&quot;&gt;
          &lt;p&gt;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.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;panel&quot;&gt;
      &lt;div class=&quot;panel-heading&quot;&gt;
        &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordionExample&quot; href=&quot;#collapseTwo&quot;&gt;&lt;span class=&quot;fa fa-cheveron-right&quot;&gt;&lt;/span&gt;Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id=&quot;collapseTwo&quot; class=&quot;panel-collapse collapse&quot;&gt;
        &lt;div class=&quot;panel-body&quot;&gt;
          &lt;p&gt;Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;panel&quot;&gt;
      &lt;div class=&quot;panel-heading&quot;&gt;
        &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordionExample&quot; href=&quot;#collapseThree&quot;&gt;&lt;span class=&quot;fa fa-cheveron-right&quot;&gt;&lt;/span&gt;Quick zephyrs blow, vexing daft Jim. Charged fop blew my junk TV quiz.&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id=&quot;collapseThree&quot; class=&quot;panel-collapse collapse&quot;&gt;
        &lt;div class=&quot;panel-body&quot;&gt;
          &lt;p&gt;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

      </section>
    </div>
  </div>
</div>