(Material Design Light) MDL Accordion

_mdl_accordion.sass

// From @nickretallack - http://nickretallack.com/experiments/mdl/collapse/index.html
.mdl-accordion.mdl-accordion--opened
  border-top: 1px solid #e0e0e0
  border-bottom: 1px solid #e0e0e0
  margin-top: -1px

.mdl-accordion.mdl-accordion--opened + .mdl-accordion.mdl-accordion--opened
  border-top: none
  margin-top: 0

.mdl-accordion .mdl-accordion__content-wrapper
  overflow: hidden

.mdl-accordion .mdl-accordion__content
  transition-property: margin-top
  transition-duration: 0.2s

.mdl-accordion .mdl-accordion__icon
  transition-property: transform
  transition-duration: 0.2s
  color: rgba(0,0,0,0.3)

  position: absolute
  right: 6px
  margin-top: -3px

.mdl-accordion.mdl-accordion--opened .mdl-accordion__icon
  transform: rotate(-180deg)

.mdl-accordion.mdl-accordion--opened .mdl-accordion__button
  color: teal

.mdl-accordion.mdl-accordion--opened .mdl-accordion__content
  margin-top: 0 !important

body.html

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
  <div class="mdl-layout__drawer">
    <div class="mdl-navigation">

      <a class="mdl-navigation__link">A link</a>

      <div class="mdl-accordion">
        <a class="mdl-navigation__link mdl-accordion__button">
          <i class="material-icons mdl-accordion__icon mdl-animation--default">expand_more</i>
          Some links
        </a>
        <div class="mdl-accordion__content-wrapper">
          <div class="mdl-accordion__content mdl-animation--default">
            <a class="mdl-navigation__link">This</a>
            <a class="mdl-navigation__link">That</a>
            <a class="mdl-navigation__link">The other</a>
          </div>
        </div>
      </div>

      <div class="mdl-accordion mdl-accordion--opened">
        <a class="mdl-navigation__link mdl-accordion__button">
          <i class="material-icons mdl-accordion__icon mdl-animation--default">expand_more</i>
          Default to opened
        </a>
        <div class="mdl-accordion__content-wrapper">
          <div class="mdl-accordion__content mdl-animation--default">
            <a class="mdl-navigation__link">Here</a>
            <a class="mdl-navigation__link">There</a>
          </div>
        </div>
      </div>

      <a class="mdl-navigation__link">Ordinary link</a>

      <div class="mdl-accordion">
        <a class="mdl-navigation__link mdl-accordion__button">
          <i class="material-icons mdl-accordion__icon mdl-animation--default">expand_more</i>
          Other links
        </a>
        <div class="mdl-accordion__content-wrapper">
          <div class="mdl-accordion__content mdl-animation--default">
            <a class="mdl-navigation__link">One</a>
            <a class="mdl-navigation__link">Two</a>
            <a class="mdl-navigation__link">Three</a>
            <a class="mdl-navigation__link">Four</a>
          </div>
        </div>
      </div>

      <a class="mdl-navigation__link">Just a link</a>

    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  $(function(){
    $('.mdl-accordion__content').each(function(){
      var content = $(this);
      content.css('margin-top', -content.height());
    });

    $(document.body).on('click', '.mdl-accordion__button', function(){
      $(this).parent('.mdl-accordion').toggleClass('mdl-accordion--opened');
    });
  });
</script>

For Pure JavaScript use

<script>
document.querySelectorAll('.mdl-accordion__content').forEach(function(accordion){
	accordion.style.marginTop = '-' + accordion.offsetHeight.toString() + 'px';
});

document.querySelectorAll('.mdl-accordion__button').forEach(function(button){
	button.addEventListener('click', function(event){
		button.parentNode.classList.toggle('mdl-accordion--opened');
	});
});
</script>

Thank you for the gist and the conversion to pure JS 👍