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