JSFiddle - React, Tailwind, and code Playground

by alexdresko

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<div class="item">
    one line
</div>

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

<div class="item">
    EVEN MORE LINES<br/>stuff<br/>stuff<br/>stuff<br/><br/>stuff<br/>stuff<br/>stuffthe 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');
            }

        });
    }

});