Question

I need to toggle full height to defined height, this is my current code:

<div style="height: 20px; overflow: hidden; display: block;" onclick="if (this.style.height == '20px') { $(this).animate({height:'auto'} } else { $(this).animate({height:'20px'}); }">

The problem is that:

$(this).animate({height:'auto'} – Animating to ‘auto’ height, doesn’t work

Using plain JS this.style.height = 'auto' does work:

How can I either animate it with jQuery or add an animation to the javascript? (either on JS or with CSS) I understand the problem lies in animating to a unknown height, is there a way to get the full height somehow? or idk, how can this be solved?

Answer 1

Here’s an animateAuto plugin that addresses this limitation of the .animate() API:

http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/