JSFiddle - React, Tailwind, and code Playground

by Ramesh Kanagaraj

HTML

<div>Lectus in mattis, placerat. Porttitor? Amet. Phasellus elementum! Odio pid scelerisque ultrices sit tincidunt, rhoncus, nascetur? Velit aliquam nec nec egestas scelerisque, amet, pulvinar? Diam in? Dapibus. Diam proin ac tincidunt aliquet purus cum eu, magna, dolor integer tincidunt egestas! Cras porttitor! Porttitor mattis tincidunt, facilisis magnis magnis? Sit tristique? A dolor? Hac urna porta enim! Integer sit eros rhoncus integer aenean porttitor urna natoque vel. In cursus et tristique, proin platea scelerisque integer auctor, tincidunt platea! Rhoncus. Adipiscing risus scelerisque, risus quis est et vel tristique eu mauris ultrices, natoque elementum scelerisque velit, facilisis? Non tincidunt ultrices facilisis non facilisis urna? Diam placerat ultrices lorem rhoncus sagittis. Cursus in, pulvinar! Non quis ac sed urna. Habitasse tempor ridiculus placerat, porttitor nunc vel integer, in, duis, vut purus porta arcu, ridiculus placerat, augue pulvinar nisi rhoncus auctor nec ultrices turpis in massa eu tincidunt! Lectus aliquet natoque ac nisi ac.

Lectus rhoncus dictumst. Lorem scelerisque, velit! Hac adipiscing lectus, ac ac, turpis, massa? Purus hac mauris dapibus, nisi lundium, adipiscing porttitor, montes turpis! Dis, parturient, platea ac adipiscing elementum? In, tincidunt porta rhoncus sed rhoncus tortor ac eu enim, placerat aliquet, nec risus dis integer amet natoque! Lundium eu turpis, odio tincidunt magnis! Vel mattis massa! Ultrices, augue vel? Integer porttitor, porta ultrices nunc duis sit ut risus mattis parturient rhoncus, quis tortor ac. Mattis quis duis vut in magnis? Ridiculus, sit amet? Turpis. Rhoncus dis cras, pid rhoncus! Aliquam aenean? Turpis aliquet integer dolor dictumst! Elementum. Ultrices magnis rhoncus nisi, dapibus elit aliquam, cras in facilisis! Cum adipiscing dolor scelerisque massa ac. Tincidunt rhoncus. Turpis. Pellentesque, etiam integer, adipiscing quis placerat, placerat habitasse. Amet nascetur ut a velit etiam...

CSS

div {
    height:5.6em;
    display:block;
    padding:10px;
    overflow:hidden;
    white-space:pre-wrap;
}
#more {
    float:right;
}
a {
    color: #0254EB
}
a:visited {
    color: #0254EB
}
a {
    text-decoration:none;
    outline: none;
}
.morecontent span {
    display: none;
}

JavaScript

$(document).ready(function () {
    var h = $('div')[0].scrollHeight;
    $('#more').click(function (e) {
        if ($('#more').attr('class') == 'More') {
            $('div').animate({
                'height': h + 10
            });
            $('#more').attr('class', "Less");
            $('#more').text("[- Less]");
        } else {
            $('div').animate({
                'height': '5.6em'
            });
            $('#more').attr('class', "More");
            $('#more').text("[+ More]");
        }
    });

});