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

This my html code:

<div >
    <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?

CodePudding user response：

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>");
paraHolder.innerHTML = "";
for (i = 0; i <= 2; 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 >
  <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>

CodePudding user response：

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 >
    <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>

CodePudding user response：

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  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  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;
}