JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<div class="item">
    one line
</div>

<div class="item">
    Multiple lines<br/>stuff<br/>stuff<br/>stuff<br/>the endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe end
</div>

<div class="item">
    EVEN MORE LINES<br/>stuff<br/>stuff<br/>stuff<br/><br/>stuff<br/>stuff<br/>stuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe endtuffthe end
</div>

CSS

.item {
    display:block;
    overflow:hidden;
    padding-bottom: 10px;
}

JavaScript

var collapsedSize = '50px';
$('.item').each(function() {
    var h = this.scrollHeight;
    console.log(h);
    var div = $(this);
    if (h > 30) {
        div.css('height', collapsedSize);
        div.after('<a id="more" class="item" href="#">Read more</a><br/>');
        var link = div.next();
        link.click(function(e) {
            e.stopPropagation();

            if (link.text() != 'Collapse') {
                link.text('Collapse');
                div.animate({
                    'height': h
                });

            } else {
                div.animate({
                    'height': collapsedSize
                });
                link.text('Read more');
            }

        });
    }

});