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