| <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> |