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 »</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');
})
}