read more, view more
// truncate text
$('.truncate-text').each(function() {
var lineNumber = $(this).next('.truncate-link').data('line-height');
var lineHeight = $(this).css('line-height').replace("px","");
var truncatedHeight = lineHeight*lineNumber;
$(this).css({'height': truncatedHeight});
if (truncatedHeight >= $(this)[0].scrollHeight) {
$(this).next('.truncate-link').css('visibility', 'hidden');
}
});
// show / hide truncated text
$('.truncate-link').click(function() {
var moreTxt = $(this).data('more');
var moreHeight = $(this).prev('.truncate-text')[0].scrollHeight;
var lessTxt = $(this).data('less');
var lineNumber = $(this).data('line-height');
var lineHeight = $(this).prev('.truncate-text').css('line-height').replace("px","");
if ($(this).hasClass('show')) {
$(this).html(lessTxt);
$(this).removeClass('show');
$(this).prev('.truncate-text').animate({'height': moreHeight});
} else {
$(this).html(moreTxt);
$(this).addClass('show');
$(this).prev('.truncate-text').animate({'height': lineHeight*lineNumber});
}
});
<div class="truncate-text">Lorem ipsum here</div>
<div class="truncate-link show" data-more="View More" data-less="View Less" data-line-height="4">View More</div>
.truncate-text {
font-size: 20px;
line-height: 1.5;
overflow: hidden;
}
.truncate-link {
cursor: pointer;
}