moxdev
9/22/2017 - 5:07 PM

Reveal Element Vanilla JS (Read More Button)

Quick and Dirty Reveal Element Vanilla JS

.read-more {

    a {

      &:hover, &:active, &:visited {
        
      }
    }

    .read-more-dropdown {
      padding-top: 1em;
      opacity: 0;
      max-height: 0;
      font-size: 0;
      transition: .25s ease;
    }

    .read-more-dropdown.active {
      opacity: 1;
      font-size: inherit;
      max-height: 999em;
    }
  }
<div class="read-more">
  <a href="#" class="read-more-btn">Read More &raquo;</a>
  <div class="read-more-dropdown">
    <span>Text to reveal</span>
  </div>
</div>
  const readMoreButton  = document.querySelectorAll('.read-more-btn');

  for (var i = 0; i < readMoreButton.length; i++) {
    readMoreButton[i].addEventListener('click', function(e) {
      e.preventDefault();
      this.nextElementSibling.classList.toggle('active');
    })
  }