JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<div class="content">
    <p>Lorem ipsum 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>

CSS

body {margin: 0; padding: 0; font: 12px/1.5 sans-serif;}
.content, .content p {text-align: justify; margin: 0 0 10px;}
a {text-decoration: none; color: #00f;}
a:hover {text-decoration: underline; color: #f00;}

JavaScript

$(document).ready(function(){
    length = 200;
    pee = $(".content").html();
    poo = $(".content").text().substr(0, length).trim();
    $(".content").addClass("compressed").html(poo + "... <a href='#' class='crap'>More</a>");
    window.poop = function()
    {
        $('.crap').click(function(){
            if ($(".content").hasClass("compressed"))
            {
                $(".content").html(pee + "<a href='#' class='crap'>Less</a>");
                $(".content").removeClass("compressed");
                poop();
                return false;
            }
            else
            {
                $(".content").html(poo + "... <a href='#' class='crap'>More</a>");
                $(".content").addClass("compressed");
                poop();
                return false;
            }
        });
    }
    poop();
});