megwoo
12/16/2015 - 3:13 AM

read more, view more

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;
}