Easily fade-out/truncate content & enable Read More button to expand content (white background).

gistfile1.html

<div class="truncate">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, error, magni dicta fugit delectus nobis harum! Temporibus, ipsam, sequi nam ullam praesentium doloribus quis necessitatibus error molestias natus non eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, accusamus, cumque, adipisci modi officiis magnam eaque aspernatur recusandae accusantium aliquam debitis explicabo dolores ratione labore nulla similique consequuntur sapiente saepe!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, error, magni dicta fugit delectus nobis harum! Temporibus, ipsam, sequi nam ullam praesentium doloribus quis necessitatibus error molestias natus non eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, accusamus, cumque, adipisci modi officiis magnam eaque aspernatur recusandae accusantium aliquam debitis explicabo dolores ratione labore nulla similique consequuntur sapiente saepe!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, error, magni dicta fugit delectus nobis harum! Temporibus, ipsam, sequi nam ullam praesentium doloribus quis necessitatibus error molestias natus non eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, accusamus, cumque, adipisci modi officiis magnam eaque aspernatur recusandae accusantium aliquam debitis explicabo dolores ratione labore nulla similique consequuntur sapiente saepe!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, error, magni dicta fugit delectus nobis harum! Temporibus, ipsam, sequi nam ullam praesentium doloribus quis necessitatibus error molestias natus non eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, accusamus, cumque, adipisci modi officiis magnam eaque aspernatur recusandae accusantium aliquam debitis explicabo dolores ratione labore nulla similique consequuntur sapiente saepe!</p>
</div>

gistfile2.js

$(function() {
	$('.truncate').each(function(){
		$(this).append('<a href="#" class="toggleReadMore"><strong class="button">Read More</strong></a>');
	})

	$(document.body).on('click', '.toggleReadMore', function() {
		// animate to full height
		$(this).parent().animate({
			"max-height": 9999
		}, {duration: 1000, queue: false });

		$(this).fadeOut({ queue: false });		// fade out read-more
		return false;		// prevent jump-down
	})
});

gistfile3.css

.truncate {
	max-height: 90px;
	position: relative;
	overflow: hidden;
}
.truncate .toggleReadMore { 
	display: block;
	position: absolute; 
	bottom: 0; left: 0;
	width: 100%; 
	text-align: center; 
	margin: 0; padding: 30px 0; 
	 
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255, 255, 255, 0)),color-stop(1, rgba(255, 255, 255, 1)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}