Others

Others


How To Create Read More Less Text Using JavaScript


The following example shows how to Create Read More Less Paragraph Text Using JavaScript.We can do it with the following 'moreLess' user defined JavaScript Function.

Ouput
Example 
<!DOCTYPE html>
<html>
  <head>
  <title>Read More Less Text Using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #more-para
      {
        display: none;
      }
    </style>
  </head>
<body>

<h3>Read More - Less Text</h3>
<p>There was a time when he would have embraced the change that was coming. In his yout<span id="para-dots">...</span><span id="more-para">h, he sought adventure and the unknown, but that had been years ago. He wished he could go back and learn to find the excitement that came with change but it was useless. That curiosity had long left him to where he had come to loathe anything that put him out of his comfort zone.</span></p>
<a onclick="moreLess(event)" id="btn" href='#'>Read More...</a>

<script>
  function moreLess(e) {
    e.preventDefault()
    var dots = document.querySelector("#para-dots");
    var morePara = document.querySelector("#more-para");
    var btnPara = document.querySelector("#btn");

    if (dots.style.display === "none") {
      dots.style.display = "inline";
      btnPara.innerHTML = "Read More..."; 
      morePara.style.display = "none";
    } else {
      dots.style.display = "none";
      btnPara.innerHTML = "&lt;&lt; Less"; 
      morePara.style.display = "inline" ;
    }
  }
</script>
</body>
</html>
Try it Yourself