Click-To-Expand Paragraph Text with jQuery
$(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');
}
});
}
});
<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>
.host-description{
overflow:hidden;
}
.read-more{
color:red;
}