how to add read more/read less after 3 paragraphs inside div with multiple paragraphs

Question

This my html code:

<div class="page-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p>
    <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p>
    <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p>
    <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p>
    <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p>
</div>

I want to add read more/read less links after 3rd paragraph tag inside div . I can't use any class for <p> tag in html since all content inside div are fetched from database with tags. Can anyone tell me the solution using css or javascript ?

Answer 1

This code should work. It first splits the text based on " </p> " to get the paragraphs and then print the top 3 only. And then adds Read More link to it.

 var paraHolder = document.getElementsByClassName("page-content")[0]; var readMore = paraHolder.innerHTML; var para = readMore.split("</p>"); var maxParas = 4; if (maxParas < para.length - 1) { paraHolder.innerHTML = ""; for (i = 0; i <= maxParas - 1; i++) { paraHolder.innerHTML += para[i] + "</p>"; } readLess = paraHolder.innerHTML; paraHolder.innerHTML += '<a href="#" onclick="readMoreFunction()">Read More...</a>'; } function readMoreFunction() { paraHolder.innerHTML = readMore + '<a href="#" onclick="return readLessFunction()">Read Less...</a>'; } function readLessFunction() { paraHolder.innerHTML = readLess + '<a href="#" onclick="return readMoreFunction()">Read More...</a>' }

 <div class="page-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p> <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p> <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> </div>

Answer 2

An alternative using mostly CSS (thus reducing FOUC), with some jquery to add a couple of buttons (could be in the html) and to add/remove a class on the wrapper .page-content .

 $("<button class='more'>read more...</button>").appendTo(".page-content").click(function() { $(this).closest(".page-content").removeClass("collapsed"); }); $("<button class='less'>read less...</button>").appendTo(".page-content").click(function() { $(this).closest(".page-content").addClass("collapsed"); });

 .page-content.collapsed >:nth-of-type(n+4) { display:none; }.page-content >.more { display:none; }.page-content >.less { display:block; }.page-content.collapsed >.more { display:block; }.page-content.collapsed >.less { display:none; } /* style as "link" */.page-content > button { background: none;important: border; none: padding; 0:important; color: #069; text-decoration: underline; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="page-content collapsed"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p> <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p> <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> </div>

Answer 3

You can create a collapsable section with pure HTML...

<details>
  <summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p>
    <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p>
    <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p>
    <label class="label" id="read-more">Read more</label>
  </summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p>
  <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p>
  <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p>
  <label class="label" id="read-less">Read less</label>
</details>

Add an event listener for label control...

details.addEventListener("toggle", event => {
  if (details.open) {
    /* the element was toggled open */
     $("#read-more").hide();
  } else {
    /* the element was toggled closed */
     $("#read-more").show();
  }
});

Add some style...

.label {
   text-align: right;
   font-size: 9px;
   display: block;
}