JQuery add animation when changing CSS height property

Question

Hope you all have a great day.

I want to add animation to this piece of code. I tried using animate (). But this did not work, maybe due to the lack of my knowledge in javascript.

Please tell me with this code, or do I need to try something else? What are you offering?

Thank you in advance.

Here is the HTML code:

<div id="description_wrapper"> Text content.<br/> See; More Text content. </div> <button class="learn_more" id="lm_more" href="#">Learn more</button> 

CSS

 #description_wrapper { margin: 0 auto; margin-top: 25px; height: 0; overflow: hidden; } 

jQuery

 $('#lm_more').click(function(event){ event.preventDefault(); if($('#description_wrapper').css('height') > '1px') { $('#description_wrapper').css({'height': '0px'}); $('#lm_more').html('Learn More'); } else { $('#description_wrapper').css({'height': 'auto'}); $('#lm_more').html('Learn less'); } }); 

Check out the code here http://jsfiddle.net/Gbspx/11/

Answer 1

I found a very good solution, and I can still use auto ... It is very important for me, especially when using a button to create more than one div

Decision:

 $('#lm_more').click(function(event){ event.preventDefault(); if($('#description_wrapper').css('height') != '0px') { $('#description_wrapper').animate({'height': '0px'}, 1000, "easeInQuint"); $('#lm_more').html('Learn More'); } else { var height_div = $('#description_wrapper').css({'height': 'auto'}).height(); $('#description_wrapper').animate({'height': height_div}, 1000, "easeInQuint"); $('#lm_more').html('Learn less'); } }); 

First I have to calculate the required height, then pass it to the animation function.

Thank you all

Answer 2

You can use some CSS3 transitions to make this very easy and seamless. Switch your current CSS with this:

 #description_wrapper { margin-top: 25px; height: 0; overflow: hidden; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -ms-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease; } 

In addition, you will need to specify the height of the given height instead of “auto” for the transition to take effect.

 $('#lm_more').click(function(event){ event.preventDefault(); if($('#description_wrapper').css('height') > '1px') { $('#description_wrapper').css({'height': '0px'}); $('#lm_more').html('Learn More'); } else { $('#description_wrapper').css({'height': '200'}); $('#lm_more').html('Learn less'); } 

});

Js fiddle

Please note that this only works in browsers that support CSS3.

Answer 3

Take a look at .slideToggle() , I think this is what you are looking for.

Answer 4

try the following:

 $('#lm_more').click(function (event) { event.preventDefault(); $('#description_wrapper').slideToggle('slow', function (){ if ($('#lm_more').text() == 'Learn more') { $('#lm_more').text('Learn less'); } else { $('#lm_more').text('Learn more'); } }); }); 

Answer 5

This works, but like the first answer, you should use slidetoggle. This is the best choice. Or addClass.

 $('#lm_more').click(function(event){ event.preventDefault(); if($('#description_wrapper').css('height') > '1px') { $('#description_wrapper').animate({height : '0px'}, 1000); $('#lm_more').html('Learn More'); } else { $('#description_wrapper').animate({height : '100%'}, 1500); $('#lm_more').html('Learn less'); } });