Toggle Hide Scroll max-height

gistfile1.txt

<div class="interactive">
  <div class="toggle">
    <p class="waves-effect">CLICK ME</p>
  </div>
  <div class="hideable">
    <p>I wrap the content. Lorem what?</p>
  </div>
</div>

<style type="text/css">
  .hideable {
    overflow: hidden;
    transition: all 0.4s ease-out;
    will-change: max-height;
    padding-left: var(--s17);
    font-size: var(--s12);
    margin-top: var(--s12);
  }
  .hideable.hidden {
    overflow: hidden;
    max-height: 0!important;
    transition: all 0.4s ease-out;
  }
</style>

<script type="text/javascript">
  window.addEventListener('load',function() {
    [].forEach.call(document.querySelectorAll(".hideable"), function(hideable) {
      hideable.style.maxHeight = hideable.scrollHeight +  "px";
    });
    document.querySelectorAll('.toggle').forEach( function(element, index) {
      element.addEventListener('click', function() {
        element.parentNode.parentNode.querySelectorAll('.hideable').forEach( function(element, index) {
          element.classList.add('hidden');
        });
        element.parentNode.querySelector('.hideable').classList.remove('hidden');
      });
    });
  });
</script>