Animate Height
HTML
<div class="test">
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<div class="footer-gradient"></div>
</div>
<div class="show-hide-buttons">
<div class="animateHeight show-all-btn">show more +</div>
<div class="animateDefault show-default-btn">show less -</div>
</div>
CSS
body{
background-color:#fff;
}
.test{
display:block;
position: relative;
max-width: 800px;
width: calc(100% - 80px);
margin: 0 auto;
height:200px;
background-color:#fff;
color:#333;
padding: 20px;
overflow:hidden;
}
.footer-gradient{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
display:block;
position: absolute;
bottom:0px;
width:100%;
height:100px;
}
.show-hide-buttons{
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0 0 0;
}
.show-default-btn{
display:block;
}
.show-default-btn{
display:none;
}
JAVASCRIPT
jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height;
return this.each(function(i, el){
el = jQuery(el), elem = el.clone().css({"height":"auto"}).appendTo("body");
height = elem.css("height"),
elem.remove();
if(prop === "height")
el.animate({"height":height}, speed, callback);
});
}
jQuery.fn.animateDefault = function(prop, speed, callback){
var elem, height;
return this.each(function(i, el){
el = jQuery(el), elem = el.clone().css({"height":"200px"}).appendTo("body");
height = elem.css("height"),
elem.remove();
if(prop === "height")
el.animate({"height":height}, speed, callback);
});
}
$(".animateHeight").bind("click", function(e){
$(".test").animateAuto("height", 1000);
$(".show-all-btn").fadeOut(500, function(){
$(".show-default-btn").fadeIn(500);
});
$('.footer-gradient').fadeOut(1000);
});
$(".animateDefault").bind("click", function(e){
$(".test").animateDefault("height", 1000);
$(".show-default-btn").fadeOut(500, function(){
$(".show-all-btn").fadeIn(500);
});
$('.footer-gradient').fadeIn(1000);
});
