Details link to pure JavaScript

Question

I am trying to create a simple Read More example. It consists of a paragraph and a button and a half paragraph, enclosed in a span tag, which is initially set to hidden. When the user clicks the "Read more" button, a hidden range appears. I have working code, but I just want to do it like JQuery, but with pure Javascript. Someone 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

Start here

 span.style.opacity = 0; 

You will need to gradually redraw the opacity here.

 span.style.opacity = 1; 

You will need to use the asynchronous construct ( setTimeout / setInterval / requestAnimationFrame ) to iterate because the synchronous ( while / for / for-in / forEach ) will block the main thread, preventing the browser from actually rendering the element with updated opacity.

 function fadeIn(element) { function transition() { if(element.style.opacity < 1) { requestAnimationFrame(transition); element.style.opacity = Number(element.style.opacity) + 0.05; } } transition(); } 

Alternatively, if you are happy to use CSS (rather than pure JS), you can do this with classes and transitions.

 .out { opacity: 0; transition-duration: 0.5s; } .in { opacity: 1; transition-duration: 0.5s; } 

Make sure the element has an out class when it arrives at the DOM, and then when you are ready to put it out, replace it with the in class and the browser will handle the animation for you.

Answer 2

One approach is to use a CSS3 transition to transition to an opaque element.

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

 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 need an approach that works for multiple elements, you can 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> 

Answer 3

 var duration = 2000; // msecs document.getElementById('hideshow').onclick = () => { requestAnimationFrame((start_time) => { var anim = (time) => { var p = (time - start_time) / duration; (p < 1) && requestAnimationFrame(anim); span.style.opacity = 1 - p; } anim(start_time); }) }