| <p>A collapsible is a component to mark expandable and collapsible regions. |
| It has states, roles, attributes and behavior in accordance with guidelines given in |
| <a href="https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions"> |
| Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions |
| </a>. |
| </p> |
| <article> |
| <button class="mdlext-js-collapsible" style="padding: 8px;"> |
| <span>Click to toggle (button)</span> |
| <i class="mdlext-aria-expanded-more-less"></i> |
| </button> |
| <div class="mdlext-collapsible-group"><p>A collapsible region #1.1</p></div> |
| <div class="mdlext-collapsible-group"><p>A collapsible region #1.2</p></div> |
| <div class="mdlext-collapsible-group"><p>A collapsible region #1.3</p></div> |
| </article> |
| |
| <article style="margin-top: 16px;"> |
| <div class="mdlext-js-collapsible mdlext-collapsible" style="padding: 8px;"> |
| <span>Click to toggle (div)</span> |
| <i class="mdlext-aria-expanded-more-less"></i> |
| </div> |
| <div class="mdlext-collapsible-region"><p>A collapsible region #2.1</p></div> |
| <div class="mdlext-collapsible-region"><p>A collapsible region #2.2</p></div> |
| <div class="mdlext-collapsible-region"><p>A collapsible region #2.3</p></div> |
| </article> |
| |
| |
| <style> |
| .mdl-card.demo-card, |
| .mdl-card.welcome-card { |
| min-height: 0; |
| width: auto; |
| margin-top: 16px; |
| margin-bottom: 16px; |
| max-width: 640px; |
| } |
| .mdl-card.demo-card .mdl-card__media, |
| .mdl-card.welcome-card .mdl-card__media { |
| margin: 0; |
| text-align: center; |
| } |
| .mdl-card.demo-card .mdl-card__media > img, |
| .mdl-card.welcome-card .mdl-card__media > img { |
| max-width: 100%; |
| height: auto; |
| } |
| .mdl-card.demo-card .mdl-card__title, |
| .mdl-card.welcome-card .mdl-card__title { |
| /* Fix bug in _card.scss */ |
| -webkit-box-pack: start; |
| -webkit-justify-content: flex-start; |
| -ms-flex-pack: start; |
| justify-content: flex-start; |
| /* end fix */ |
| |
| padding-top: 0; |
| padding-bottom: 0; |
| min-height: 64px; |
| } |
| .mdl-card.demo-card .mdl-card__title:focus, |
| .mdl-card.welcome-card .mdl-card__title:focus { |
| /* Must focus ring must be inside title since mdl-card has overflow:hidden */ |
| outline-offset: -4px; |
| } |
| .mdl-card.demo-card .mdl-card__title > *, |
| .mdl-card.welcome-card .mdl-card__title > * { |
| -webkit-align-self: center; |
| -ms-flex-item-align: center; |
| align-self: center; |
| } |
| .mdl-card.demo-card .mdl-card__supporting-text, |
| .mdl-card.welcome-card .mdl-card__supporting-text { |
| width: auto; |
| } |
| .mdl-card.demo-card .mdl-card__actions, |
| .mdl-card.welcome-card .mdl-card__actions { |
| display: -webkit-box; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| } |
| .welcome-card > .mdl-card__title { |
| color: #fff; |
| height: 176px; |
| background: url('./assets/welcome_card.jpg') top / cover; |
| } |
| .welcome-card > .mdl-card__title[aria-expanded='false'] { |
| height: 64px; |
| } |
| .welcome-card > .mdl-card__title .mdl-card__title-text { |
| -webkit-align-self: flex-end; |
| -ms-flex-item-align: end; |
| align-self: flex-end; |
| padding-bottom: 16px; |
| } |
| .welcome-card > .mdl-card__title[aria-expanded='false'] .mdl-card__title-text { |
| -webkit-align-self: center; |
| -ms-flex-item-align: center; |
| align-self: center; |
| padding-bottom: 0; |
| } |
| .welcome-card > .mdl-card__menu { |
| color: #fff; |
| } |
| |
| table.info { |
| width: 100% |
| } |
| table.info th { |
| padding-right: 40px; |
| vertical-align: middle; |
| text-align: left; |
| width: 120px; |
| } |
| </style> |
| |
| <div class="welcome-card mdl-card mdl-shadow--2dp"> |
| <header class="mdl-card__title mdlext-js-collapsible mdlext-collapsible" aria-expanded="true"> |
| <h2 class="mdl-card__title-text">A Collapsible Card</h2> |
| </header> |
| <section class="mdl-card__supporting-text mdlext-collapsible-group"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Mauris sagittis pellentesque lacus eleifend lacinia... |
| </section> |
| <footer class="mdl-card__actions mdl-card--border mdlext-collapsible-group"> |
| <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> |
| Get Started |
| </button> |
| </footer> |
| <div class="mdl-card__menu"> |
| <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> |
| <i class="material-icons">share</i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <style> |
| .mdlext-collapsible-group .mdlext-js-collapsible, |
| .mdlext-collapsible-group .mdlext-collapsible-group { |
| margin-left: 16px; |
| } |
| </style> |
| |
| <button class="mdlext-js-collapsible mdl-button mdl-button--colored mdl-button--raised">Click to toggle</button> |
| <div class="mdlext-collapsible-group"> |
| <p>A collapsible region</p> |
| |
| <button class="mdlext-js-collapsible mdl-button mdl-button--accent mdl-button--raised">Click to toggle nested #1</button> |
| <div class="mdlext-collapsible-group"> |
| <p>A nested collapsible region</p> |
| |
| <button class="mdlext-js-collapsible mdl-button mdl-button--colored mdl-color--deep-orange-100 mdl-button--raised">Click to toggle nested #2</button> |
| <div class="mdlext-collapsible-group"> |
| <p>Last region</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="another-card" class="mdl-card demo-card mdl-shadow--2dp mdlext-dark-color-theme"> |
| <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast mdlext-js-collapsible mdlext-collapsible"> |
| <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> |
| <i class="material-icons">view_headline</i> |
| </button> |
| <h2 class="mdl-card__title-text">Another collapsible card</h2> |
| <div class="mdl-layout-spacer"></div> |
| <i class="material-icons md-36 mdlext-aria-expanded-more-less"></i> |
| </header> |
| <figure class="mdl-card__media mdlext-collapsible-region"> |
| <img src="./images/_DSC7535-2.jpg" alt=""> |
| </figure> |
| <section style="margin-top:16px" class="mdl-card__supporting-text mdlext-collapsible-region"> |
| <table class="info"> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">primary-dark</th> |
| <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">primary dark</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">primary</th> |
| <td class="mdl-color--primary mdl-color-text--primary-contrast">primary</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">accent</th> |
| <td class="mdl-color--accent mdl-color-text--accent-contrast">accent</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">primary-dark</th> |
| <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">primary dark, inverted</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">primary</th> |
| <td class="mdl-color--primary-contrast mdl-color-text--primary">primary, inverted</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">accent</th> |
| <td class="mdl-color--accent-contrast mdl-color-text--accent">accent, inverted</td> |
| </tr> |
| </table> |
| </section> |
| |
| <div class="mdl-card__supporting-text mdlext-collapsible-region"> |
| Card Supporting Text |
| </div> |
| |
| <footer class="mdl-card__actions mdl-card--border"> |
| <button id="read-more" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> |
| Read more |
| </button> |
| <div class="mdl-layout-spacer"></div> |
| <button class="mdl-button mdl-button--icon"><i class="material-icons">radio</i></button> |
| <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> |
| </footer> |
| </div> |
| |
| |
| |
| <script> |
| (function() { |
| 'use strict'; |
| window.addEventListener('load', function() { |
| |
| document.querySelector('#read-more').addEventListener('click', function (e) { |
| var collapsible = document.querySelector('#another-card .mdlext-js-collapsible'); |
| collapsible.MaterialExtCollapsible.expand(); |
| }); |
| |
| document.querySelector('#another-card').addEventListener('toggle', function (e) { |
| console.log('Toggle action:', e.detail.action); |
| }); |
| |
| }); |
| |
| }()); |
| |
| </script> |