Click-To-Expand Paragraph Text with jQuery

click-to-expand.css

.host-description{
  overflow:hidden;
}
.read-more{
  color:red;
}

click-to-expand.html

<div class="host-description">
  <div class="show-more-visible">
  	<p>
  		Få en god start på dagen med nybrygget kaffe og ferske bakervarerOn prore pre cus,<br>
  		ut aut a dolum que dolum estiate cus, si dit, que pa qui volut ate et ut quam faccus.<br>
  		Hendissita cum quiscipsam, a volupie nisit, consed quunt ulluptati bera cum volupta si re
		</p>
  </div>
<p>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a type 
	specimen book. It has survived not only five centuries, but also the leap into 
	electronic typesetting, remaining essentially unchanged. It was popularised in 
	the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
	and more recently with desktop publishing software like Aldus PageMaker including 
	versions of Lorem Ipsum.
</p>
<p>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
	Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
	unknown printer took a galley of type and scrambled it to make a type specimen book. 
	It has survived not only five centuries, but also the leap into electronic typesetting, 
	remaining essentially unchanged. It was popularised in the 1960s with the release of 
	Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
	software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>
</div>

click-to-expand.js

$(function () {
  var animspeed = 950;
  var $content = $('.host-description');
  var $visible_content = $('.show-more-visible');

  if ($visible_content.length > 0) {
    var height = $content.height();
    var mini = $visible_content.height();

    $content.attr('data-fullheight', height + 'px');
    $content.attr('data-miniheight', mini + 'px');
    $content.css('height', mini + 'px');

    $('<a class="read-more" data-position="contract">Les mer</a>').insertAfter($content);

    $('.read-more').on('click', function (e) {
      $text = $(this).prev();
      if ($(this).attr('data-position') == 'contract') {
        $text.animate({
          'height': $text.attr('data-fullheight')
        }, animspeed);
        $(this).attr('data-position','expand');
      } else if ($(this).attr('data-position') == 'expand') {
        $text.animate({
          'height': $text.attr('data-miniheight')
        }, animspeed);
        $(this).attr('data-position','contract');
      }
    });
  }
});