JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content">
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit. Totam suscipit veniam non <a href="#">magni similique</a>. Asperiores aut sapiente nobis porro ad provident eveniet eos aspernatur quidem iusto! Dolorum libero porro animi.</p>
<p>Consectetur adipisicing elit. Sapiente aperiam voluptas mollitia laboriosam delectus <strong>possimus minus quaerat culpa</strong> eos corporis tenetur ducimus quo incidunt aspernatur doloremque unde nihil. Quis quaerat!</p>
<p>Ea iusto obcaecati cumque quae numquam minima laboriosam porro sit a animi reprehenderit eveniet saepe aperiam optio nemo eos et. Eaque perferendis.</p>
</div>
JavaScript
$(document).ready(function(){
length = 105;
cHtml = $(".content").html();
cText = $(".content").html().substr(0, length).trim();
$(".content").addClass("compressed").html(cText + "... <a href='#' class='exp'>More</a>");
window.handler = function()
{
$('.exp').click(function(){
if ($(".content").hasClass("compressed"))
{
$(".content").html(cHtml + "<a href='#' class='exp'>Less</a>");
$(".content").removeClass("compressed");
handler();
return false;
}
else
{
$(".content").html(cText + "... <a href='#' class='exp'>More</a>");
$(".content").addClass("compressed");
handler();
return false;
}
});
}
handler();
});