Categories
CSS Web development

Read More/ Read Less Button

Read More/ Read Less Button

To create the CSS & JavaScript Read More/ Less button follow the steps below:

Demo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra scelerisque orci, eu laoreet tortor euismod quis. Sed id volutpat magna. Suspendisse porta nisi eget massa accumsan, nec tempus est consectetur. Nam quis quam volutpat, luctus massa interdum, dictum metus. Etiam ut scelerisque ante. Quisque quam sem nulla. Quisque quam sem, porttitor eu finibus in, consequat quis sapien. Maecenas id fermentum lorem. Nulla vitae mattis justo, non dictum velit. Phasellus sit amet lorem viverra, sagittis neque id, volutpat leo. Curabitur purus elit, tincidunt nec commodo a, sollicitudin eu ipsum. Suspendisse pulvinar tincidunt nisl.


Step1.

Add HTML

Add some text and the button:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra scelerisque orci, eu laoreet tortor euismod quis. Sed id volutpat magna. Suspendisse porta nisi eget massa accumsan, nec tempus est consectetur. Nam quis quam volutpat, luctus massa interdum, dictum metus. Etiam ut scelerisque ante. Quisque quam sem <span id="sep">...</span><span id="moreText">nulla. Quisque quam sem, porttitor eu finibus in, consequat quis sapien. Maecenas id fermentum lorem. Nulla vitae mattis justo, non dictum velit. Phasellus sit amet lorem viverra, sagittis neque id, volutpat leo. Curabitur purus elit, tincidunt nec commodo a, sollicitudin eu ipsum. Suspendisse pulvinar tincidunt nisl. </span></p>

<button onclick="readMoreLess()" id="button">Read more</button>

Step2.

Add CSS

#moreText {display: none;}

Step3.

Add JavaScript

function readMoreLess() {
  var sep = document.getElementById("sep");
  var moreText = document.getElementById("moreText");
  var buttonText = document.getElementById("button");

  if (sep.style.display === "none") {
    sep.style.display = "inline";
    buttonText.innerHTML = "Read More"; 
    moreText.style.display = "none";
  } else {
    sep.style.display = "none";
    buttonText.innerHTML = "Read Less"; 
    moreText.style.display = "inline";
  }
}

Enjoy coding!