Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/accordion/snippets/accordion.html b/node_modules/mdl-ext/src/accordion/snippets/accordion.html
new file mode 100644
index 0000000..fae785c
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/snippets/accordion.html
@@ -0,0 +1,1072 @@
+<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 © 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>