JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="content">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt tortor vel elit vehicula malesuada. Sed id neque nunc, sit amet pharetra nulla. Donec ultricies vulputate hendrerit. Quisque ut sem sit amet ligula blandit molestie vel sit amet elit. Sed egestas libero sed lacus vulputate vel 
    </p>
    <p>
        Praesent ipsum metus, rutrum sit amet aliquet dignissim, feugiat a risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla non velit ac dolor interdum malesuada porttitor a elit. Mauris ligula lorem, dictum sed suscipit mollis, porttitor eu lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris porta tempus justo, non scelerisque elit placerat eget. 
    </p>
    <p>
        Ut ac lorem et erat ultrices adipiscing ac sit amet elit. Nunc vitae nibh quis urna varius consectetur vel et tortor. Integer commodo arcu eu sem pulvinar hendrerit. Phasellus eget lacus risus. Pellentesque pellentesque nulla non neque sollicitudin placerat. Sed interdum imperdiet tincidunt. Pellentesque nisl diam, auctor vel adipiscing in, ultrices eget lacus. 
    </p>
    <p>
        Duis sagittis vulputate dapibus. Fusce felis mi, dictum vitae porta id, vestibulum eget nisi. Nulla porta nulla ut arcu fringilla et aliquam nunc venenatis. Vivamus ut nunc nibh. In scelerisque, ipsum quis pulvinar iaculis, urna augue auctor lacus, quis dapibus est enim in ipsum. In libero odio, volutpat id fermentum ut, aliquet vel purus. Nam pharetra accumsan justo ut placerat. Ut eu magna eu orci vestibulum adipiscing ut in nunc. Aliquam consectetur ligula et augue pulvinar at fringilla libero molestie. Sed viverra convallis purus non porttitor. Sed vestibulum, ligula a scelerisque scelerisque, odio eros elementum dolor, in tristique leo sapien eget mi....

CSS

p {
    margin-bottom: 0.5em;
}

JavaScript

$(function() {
    
    var $content = $("#content");
    var $hiddenText = $content.children().slice(3).hide();
    if ($hiddenText.length) {        
        var $button = $("<a href='#'>Read More...</a>").click(function() {
            $hiddenText.show();
            $button.remove();
            return false;
        }).appendTo($content);
    }
    
});