Read more link with pure JavaScript

Question

I am trying to create a simple Read More example. It consists of a paragraph and a button with half of the paragraph enclosed in a span tag which is initially set to hidden. When user clicks on Read More button the hidden span shows up. I have got the working code but just want to do a fade in effect like JQuery but with pure Javascript. Anyone please help.

var span = document.getElementsByTagName('span')[0];
var hideshow = document.getElementById('hideshow');

span.style.display = 'none';

hideshow.onclick = function() {
  span.style.display = 'block';
};

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>

<button id="hideshow">Read More</button>

Answer 1

One approach is to use a CSS3 transition in order to transition the element's opacity.

In the example below, the class fade-in is added to the child span element when clicking the button.

var button = document.querySelector('.read-more');

button.addEventListener('click', function(event) {
  var span = event.target.previousElementSibling.querySelector('span');
  span.classList.add('fade-in');
});

.show-more span {
  display: inline-block;
  height: 0;
  overflow: hidden;
  transition: opacity 2s;
  opacity: 0;
}
.show-more span.fade-in {
  height: auto;
  opacity: 1;
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>

If you want an approach that works for multiple elements, you could also use the following:

var buttons = document.querySelectorAll('.read-more');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(event) {
    var span = event.target.previousElementSibling.querySelector('span');
    span.classList.add('fade-in');
  });
}

.show-more span {
  display: inline-block;
  height: 0;
  overflow: hidden;
  transition: opacity 2s;
  opacity: 0;
}
.show-more span.fade-in {
  height: auto;
  opacity: 1;
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>

<p class="show-more">Another shorter paragraph. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>