JSFiddle - React, Tailwind, and code Playground

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>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasd<br></div>
<a id="more" href="#">Read more </a>

CSS

div{
    width:100px;
    height:50px;
    display:block;
    border:1px solid red;
    padding:10px;
    overflow:hidden;
}

JavaScript

var h = $('div')[0].scrollHeight;


$('#more').click(function(e) {
    e.stopPropagation();
    $('div').animate({
        'height': h
    })
});

$(document).click(function() {
    $('div').animate({
        'height': '50px'
    })
})