Jquery show more

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;
  line-height: 20px;
}

JavaScript

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

divLineHeight = parseInt($('div').css('line-height'));
divPaddingTop = parseInt($('div').css('padding-top'));
lineToShow = 2;
divPreviewHeight = divLineHeight*lineToShow - divPaddingTop;
$('div').css('height', divPreviewHeight );

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

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