<p>A Collection of panels within a common outer pane.</p>
<p><strong>Note:</strong> The accordion has been refactored and is not compatible with the accordion prior to version 0.9.13</p>


<h4>Horizontal accordion, ripple effect, animated tabpanel, aria-multiselectable="false"</h4>

<style>
  .demo-accordion-1 {
    height: 300px; /* In horizontal layout, the accordion must have a height */
  }
  .demo-accordion-1 .mdlext-accordion__tabpanel {
    background-color: rgba(239, 154, 154, 0.4);  /* Just a trace color */
  }
</style>

<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-1"
    role="tablist" aria-multiselectable="false">

  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
      <i class="material-icons">info</i>
      <span class="mdlext-accordion__tab__caption">First tab. A long caption should not push the state icon</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
      <h5>Content #1 goes here</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
      </p>
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
      </p>
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <span class="mdlext-accordion__tab__caption">Tab #2</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #2 goes here</h5>
      <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
      <i class="material-icons">warning</i>
      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #3 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <i class="material-icons">accessibility</i>
      <i class="material-icons">help_outline</i>
      <i class="material-icons">radio</i>
      <span class="mdlext-accordion__tab__caption">Tab #4</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #4 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #5 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
</ul>


<h4>Horizontal accordion, aria-multiselectable="true"</h4>
<p><strong>Hint:</strong> Use a container to draw outer borders</p>

<style>
  .demo-accordion-2-container {
    border: 1px solid #00b0ff;
  }
  .demo-accordion-2 {
    height: 313px;
  }
  .demo-accordion-2 .mdlext-accordion__tabpanel {
    background-color: rgba(206, 147, 216, 0.4);
  }
</style>

<div class="demo-accordion-2-container">
  <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal demo-accordion-2" role="tablist" aria-multiselectable="true">

    <li class="mdlext-accordion__panel" role="presentation">
      <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
        <i class="material-icons">info</i>
        <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
        <i class="mdlext-aria-toggle-material-icons"></i>
      </header>
      <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
        <h5>Content #1 goes here</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
          Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
          in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
          ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
        </p>
        <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
          justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
          mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
          neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
          blandit leo ullamcorper vel.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
          Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
          in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
          ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
        </p>
        <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
          justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
          mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
          neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
          blandit leo ullamcorper vel.
        </p>
      </section>
    </li>
    <li class="mdlext-accordion__panel" role="presentation">
      <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
        <span class="mdlext-accordion__tab__caption">Tab #2</span>
        <i class="mdlext-aria-toggle-material-icons"></i>
      </header>
      <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
        <h5>Content #2 goes here</h5>
        <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
          arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
        </p>
      </section>
    </li>
    <li class="mdlext-accordion__panel" role="presentation">
      <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
        <i class="material-icons">warning</i>
        <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
        <i class="mdlext-aria-toggle-material-icons"></i>
      </header>
      <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
        <h5>Content #3 goes here</h5>
        <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
          ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
          maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
        </p>
      </section>
    </li>
    <li class="mdlext-accordion__panel" role="presentation">
      <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
        <i class="material-icons">accessibility</i>
        <i class="material-icons">help_outline</i>
        <i class="material-icons">radio</i>
        <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
      </header>
      <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
        <h5>Content #4 goes here</h5>
        <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
          ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
          maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
        </p>
      </section>
    </li>
    <li class="mdlext-accordion__panel" role="presentation">
      <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
        <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
        <i class="mdlext-aria-toggle-material-icons"></i>
      </header>
      <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
        <h5>Content #5 goes here</h5>
        <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
          ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
          maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
        </p>
      </section>
    </li>
  </ul>
</div>


<h4>Vertical accordion, ripple effect, animated tabpanel, aria-multiselectable="true"</h4>

<style>
  .demo-accordion-3 .mdlext-accordion__tabpanel {
    background-color: rgba(144, 202, 249, 0.4);
  }
</style>

<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-3"
    role="tablist" aria-multiselectable="true">

  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
      <i class="material-icons">info</i>
      <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
      <h5>Content #1 goes here</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
      </p>
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <span class="mdlext-accordion__tab__caption">Tab #2</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #2 goes here</h5>
      <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
      <i class="material-icons">warning</i>
      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #3 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <i class="material-icons">accessibility</i>
      <i class="material-icons">help_outline</i>
      <i class="material-icons">radio</i>
      <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #4 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel">
      <h5>Content #5 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
</ul>


<h4>Vertical accordion, aria-multiselectable="false"</h4>
<p><strong>Hint:</strong> Use a container to draw outer borders</p>

<style>
  .demo-accordion-4 {
    height: 500px;
    border: 1px solid #00b0ff;
  }
  .demo-accordion-4 .mdlext-accordion__tabpanel {
    background-color: rgba(165, 214, 167, 0.4);
  }
</style>

<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical demo-accordion-4" role="tablist" aria-multiselectable="false">

  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <i class="material-icons">info</i>
      <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel">
      <h5>Content #1 goes here</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
      </p>
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
      <span class="mdlext-accordion__tab__caption">Tab #2</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel">
      <h5>Content #2 goes here</h5>
      <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled>
      <i class="material-icons">warning</i>
      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #3 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <i class="material-icons">accessibility</i>
      <i class="material-icons">help_outline</i>
      <i class="material-icons">radio</i>
      <span class="mdlext-accordion__tab__caption">Tab #4</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel">
      <h5>Content #4 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel">
      <h5>Content #5 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
</ul>


<h4>Disabled accordion</h4>
<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal demo-accordion-1"
    role="tablist" aria-multiselectable="false" disabled>

  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
      <i class="material-icons">info</i>
      <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
      <h5>Content goes here</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
      </p>
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
      </p>
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <span class="mdlext-accordion__tab__caption">Tab #2</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
      <i class="material-icons">warning</i>
      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <i class="material-icons">accessibility</i>
      <i class="material-icons">help_outline</i>
      <i class="material-icons">radio</i>
      <span class="mdlext-accordion__tab__caption">Tab #4</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
    </section>
  </li>
</ul>


<h4>Accordion API</h4>

<style>
  .cmd-button {
    min-width: 140px;
  }
  .demo-accordion-6 .mdlext-accordion__tabpanel {
    background: rgba(255, 224, 130, 0.4);
  }
</style>

<h5>Public methods</h5>

<section style="margin-bottom: 16px">
  <button id="btn-api-expand-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Expand all
  </button>
  <button id="btn-api-collapse-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Collapse all
  </button>
  <button id="btn-api-open-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Open tab #2
  </button>
  <button id="btn-api-close-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Close tab #2
  </button>
  <button id="btn-api-toggle-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Toggle tab #2
  </button>
  <button id="btn-api-new-tab" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Add a new tab
  </button>
</section>

<h5>Custom events</h5>

<section style="margin-bottom: 16px">
  <button id="btn-event-expand-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Expand all
  </button>
  <button id="btn-event-collapse-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Collapse all
  </button>
  <button id="btn-event-open-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Open tab #2
  </button>
  <button id="btn-event-close-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Close tab #2
  </button>
  <button id="btn-event-toggle-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Toggle tab #2
  </button>
  <button id="btn-event-new-tab" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
    Add a new tab
  </button>
</section>


<ul id="demo-accordion-6" class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical demo-accordion-6"
    role="tablist" aria-multiselectable="true">

  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
      <i class="material-icons">info</i>
      <span class="mdlext-accordion__tab__caption">Tab #1</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
      <h5>Content #1 goes here</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
      </p>
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <span class="mdlext-accordion__tab__caption">Tab #2</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #2 goes here</h5>
      <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
      <i class="material-icons">warning</i>
      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #3 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <i class="material-icons">accessibility</i>
      <i class="material-icons">help_outline</i>
      <i class="material-icons">radio</i>
      <span class="mdlext-accordion__tab__caption">Tab #4</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
      <h5>Content #4 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
  <li class="mdlext-accordion__panel" role="presentation">
    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
      <i class="mdlext-aria-toggle-material-icons"></i>
    </header>
    <section class="mdlext-accordion__tabpanel" role="tabpanel">
      <h5>Content #5 goes here</h5>
      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
      </p>
    </section>
  </li>
</ul>


<h4>Styling the accordion</h4>

<style>
  .demo-accordion-7 {
    height: 300px;
  }
  .demo-accordion-7 .mdlext-accordion__panel,
  .demo-accordion-7 .mdlext-accordion__tab {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
  }
  .colored-panel:nth-child(1) {
    background: rgba(239, 154, 154, 0.4);
  }
  .colored-panel:nth-child(2) {
    background: rgba(206, 147, 216, 0.4);
  }
  .colored-panel:nth-child(3) {
    background: rgba(144, 202, 249, 0.4);
  }
  .colored-panel:nth-child(4) {
    background: rgba(165, 214, 167, 0.4);
  }
  .colored-panel:nth-child(5) {
    background: rgba(255, 224, 130, 0.4);
  }
  .mdlext-aria-toggle-plus-minus {
    font-size: 20px;
  }
  .img-box {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .img-box--6 {
    background-image: url(./images/_D806374.jpg);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 100%), url(./images/_D806374.jpg);
  }
  .img-box--7 {
    background-image: url('./images/_D802478.jpg');
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%), url(./images/_D802478.jpg);
  }
  .img-box--8 {
    background-image: url('./images/_D803221.jpg');
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 100%), url(./images/_D803221.jpg);
  }
  .img-box--9 {
    background-image: url('./images/_D802143-2.jpg');
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 100%), url(./images/_D802143-2.jpg);
  }
  .img-box--10 {
    background-image: url('./images/_D809758-2.jpg');
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%), url(./images/_D809758-2.jpg);
  }
</style>

<ul id="demo-accordion-7" class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-7">
  <li class="mdlext-accordion__panel colored-panel">
    <header class="mdlext-accordion__tab" aria-expanded="true">
      <i class="material-icons md-16">dns</i>
      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Accordion</span>
      <i class="mdlext-aria-toggle-plus-minus"></i>
    </header>
    <section class="mdlext-accordion__tabpanel img-box img-box--6">
      <h5>Introduction</h5>
      <p>An accordion component is a collection of expandable panels associated with a common outer container. Panels consist
        of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections
        of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy.
        The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates
        and makes the contents of each panel visible (or not) by interacting with the Accordion Header.</p>
    </section>
  </li>
  <li class="mdlext-accordion__panel colored-panel">
    <header class="mdlext-accordion__tab">
      <i class="material-icons md-16">all_inclusive</i>
      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Include Component</span>
      <i class="mdlext-aria-toggle-plus-minus"></i>
    </header>
    <section class="mdlext-accordion__tabpanel img-box img-box--7">
      <p style = "margin-top:128px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
    </section>
  </li>
  <li class="mdlext-accordion__panel colored-panel">
    <header class="mdlext-accordion__tab">
      <i class="material-icons md-16">build</i>
      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Configuration Options</span>
      <i class="mdlext-aria-toggle-plus-minus"></i>
    </header>
    <section class="mdlext-accordion__tabpanel img-box img-box--8">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
    </section>
  </li>
  <li class="mdlext-accordion__panel colored-panel">
    <header class="mdlext-accordion__tab">
      <i class="material-icons md-16">public</i>
      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Fourth section</span>
      <i class="mdlext-aria-toggle-plus-minus"></i>
    </header>
    <section class="mdlext-accordion__tabpanel img-box img-box--9">
      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
        blandit leo ullamcorper vel.</p>
    </section>
  </li>
  <li class="mdlext-accordion__panel colored-panel">
    <header class="mdlext-accordion__tab">
      <i class="material-icons md-16">public</i>
      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Fifth</span>
      <i class="mdlext-aria-toggle-plus-minus"></i>
    </header>
    <section class="mdlext-accordion__tabpanel img-box img-box--10">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
        maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
    </section>
  </li>
</ul>


<h4>Color themes</h4>

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone mdlext-dark-color-theme">

    <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect"
        role="tablist" aria-multiselectable="true">

      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
          <i class="material-icons">info</i>
          <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
          <i class="mdlext-aria-toggle-material-icons"></i>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
          <h5>Content #1 goes here</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
            Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
            in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
            ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
          </p>
          <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
            justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
            mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
            neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
            blandit leo ullamcorper vel.
          </p>
        </section>
      </li>
      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
          <span class="mdlext-accordion__tab__caption">Tab #2</span>
          <i class="mdlext-aria-toggle-material-icons"></i>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
          <h5>Content #2 goes here</h5>
          <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
            arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
          </p>
        </section>
      </li>
      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
          <i class="material-icons">warning</i>
          <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
          <i class="mdlext-aria-toggle-material-icons"></i>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
          <h5>Content #3 goes here</h5>
          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
          </p>
        </section>
      </li>
      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
          <i class="material-icons">accessibility</i>
          <i class="material-icons">help_outline</i>
          <i class="material-icons">radio</i>
          <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
          <h5>Content #4 goes here</h5>
          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
          </p>
        </section>
      </li>
      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" role="tab">
          <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
          <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
          <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
          <i class="mdlext-aria-toggle-material-icons"></i>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel">
          <h5>Content #5 goes here</h5>
          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
          </p>
        </section>
      </li>
    </ul>
  </div>  <!-- mdl-cell -->

  <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">
    <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect mdlext-light-color-theme"
        role="tablist" aria-multiselectable="true">

      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
          <i class="material-icons">info</i>
          <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
          <i class="mdlext-aria-toggle-material-icons"></i>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
          <h5>Content #1 goes here</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
            Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
            in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
            ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
          </p>
          <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
            justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
            mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
            neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
            blandit leo ullamcorper vel.
          </p>
        </section>
      </li>
      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
          <span class="mdlext-accordion__tab__caption">Tab #2</span>
          <i class="mdlext-aria-toggle-material-icons"></i>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
          <h5>Content #2 goes here</h5>
          <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
            arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
          </p>
        </section>
      </li>
      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
          <i class="material-icons">warning</i>
          <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
          <i class="mdlext-aria-toggle-material-icons"></i>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
          <h5>Content #3 goes here</h5>
          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
          </p>
        </section>
      </li>
      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
          <i class="material-icons">accessibility</i>
          <i class="material-icons">help_outline</i>
          <i class="material-icons">radio</i>
          <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
          <h5>Content #4 goes here</h5>
          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
          </p>
        </section>
      </li>
      <li class="mdlext-accordion__panel" role="presentation">
        <header class="mdlext-accordion__tab" role="tab">
          <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
          <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
          <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
          <i class="mdlext-aria-toggle-material-icons"></i>
        </header>
        <section class="mdlext-accordion__tabpanel" role="tabpanel">
          <h5>Content #5 goes here</h5>
          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
          </p>
        </section>
      </li>
    </ul>
  </div>  <!-- mdl-cell -->
</div> <!-- mdl-grid -->


<p class="mdl-typography--caption" style="margin-top: 64px;">
  All images appearing in this page are the exclusive property of Leif Olsen and are protected under the United States and International Copyright laws.
  The images may not be reproduced or manipulated without the written permission of Leif Olsen.
  Use of any image as the basis for another photographic concept or illustration (digital, artist rendering or alike) is a violation of the United States and International Copyright laws.
  All images are copyrighted &copy; Leif Olsen, 2016.
</p>

<script>
  (function() {
    'use strict';

    function insertPanel() {
      var panel =
        '<li class="mdlext-accordion__panel">'
        +  '<header class="mdlext-accordion__tab" aria-expanded="true">'
        +    '<span class="mdlext-accordion__tab__caption">New Tab</span>'
        +    '<i class="mdlext-aria-toggle-material-icons"></i>'
        +  '</header>'
        +  '<section class="mdlext-accordion__tabpanel">'
        +    '<h5>New tab content</h5>'
        +    '<p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie'
        +      'arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.'
        +    '</p>'
        +  '</section>'
        +'</li>';

      var accordion = document.querySelector('#demo-accordion-6');
      accordion.insertAdjacentHTML('beforeend', panel);
    }

    window.addEventListener('load', function() {

      // Listen to accordion toggle event
      document.querySelector('#demo-accordion-6').addEventListener('toggle', function(e) {
        //console.log('Accordion tab toggled. New state:', e.detail.state, 'Tab:', e.detail.tab, 'Tabpanel:', e.detail.tabpanel);
        console.log('Accordion tab toggled. New state:', e.detail.state);
      });

      // Interact with accordion using public methods
      document.querySelector('#btn-api-expand-all').addEventListener('click', function(e) {
        var accordion = document.querySelector('#demo-accordion-6');
        accordion.MaterialExtAccordion.command( {action: 'open'} );
      });

      document.querySelector('#btn-api-collapse-all').addEventListener('click', function(e) {
        var accordion = document.querySelector('#demo-accordion-6');
        accordion.MaterialExtAccordion.command( {action: 'close'} );
      });

      document.querySelector('#btn-api-open-tab2').addEventListener('click', function(e) {
        var accordion = document.querySelector('#demo-accordion-6');
        var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2) .mdlext-accordion__tab');
        accordion.MaterialExtAccordion.command( {action: 'open', target: tab2} );
      });

      document.querySelector('#btn-api-close-tab2').addEventListener('click', function(e) {
        var accordion = document.querySelector('#demo-accordion-6');
        var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');
        accordion.MaterialExtAccordion.command( {action: 'close', target: tab2} );
      });

      document.querySelector('#btn-api-toggle-tab2').addEventListener('click', function(e) {
        var accordion = document.querySelector('#demo-accordion-6');
        var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');
        accordion.MaterialExtAccordion.command( {action: 'toggle', target: tab2} );
      });

      document.querySelector('#btn-api-new-tab').addEventListener('click', function(e) {
        insertPanel();
        var accordion = document.querySelector('#demo-accordion-6');
        var panelElement  = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:last-child');
        accordion.MaterialExtAccordion.command( {action: 'upgrade', target: panelElement} );
      });

      // Interact with accordion using custom event
      var eventButtons = document.querySelectorAll('button[id^="btn-event-"]');
      for (var i = 0, n = eventButtons.length; i < n; i++) {
        eventButtons[i].addEventListener('click', function(e) {
          var ce;
          var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');

          switch (e.target.id) {
            case 'btn-event-expand-all':
              ce = new CustomEvent('command', { detail: { action : 'open' } });
              break;
            case 'btn-event-collapse-all':
              ce = new CustomEvent('command', { detail: { action : 'close' } });
              break;
            case 'btn-event-open-tab2':
              ce = new CustomEvent('command', { detail: { action : 'open', target: tab2 } });
              break;
            case 'btn-event-close-tab2':
              ce = new CustomEvent('command', { detail: { action : 'close', target: tab2 } });
              break;
            case 'btn-event-toggle-tab2':
              ce = new CustomEvent('command', { detail: { action : 'toggle', target: tab2 } });
              break;
            case 'btn-event-new-tab':
              insertPanel();
              var panelElement  = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:last-child');
              ce = new CustomEvent('command', { detail: { action : 'upgrade', target: panelElement } });
              break;
            default:
              return;
          }
          var accordion = document.querySelector('#demo-accordion-6');
          accordion.dispatchEvent(ce);
        });
      }
    });

  }());

</script>