Skip to content

Instantly share code, notes, and snippets.

@spsaucier

spsaucier/gist:7190181

Created October 28, 2013 01:41
Show Gist options
  • Save spsaucier/7190181 to your computer and use it in GitHub Desktop.
Save spsaucier/7190181 to your computer and use it in GitHub Desktop.
Download ZIP
Easily fade-out/truncate content & enable Read More button to expand content (white background).
Raw
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>
Raw
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
})
});
Raw
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));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment