Animate element to auto height with jQuery

Question

I want to animate a <div> from 200px to auto height. I can’t seem to make it work though. Does anyone know how?

Here’s the code:

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

Answer 1

I am posting this answer even though this thread is old. I couldn't get the accepted answer to work for me. This one works well and is pretty simple.

I load the height of each div I want into the data

$('div').each(function(){
    $(this).data('height',$(this).css('height'));
    $(this).css('height','20px');
});

Then I just use that when animating on click.

$('div').click(function(){
    $(this).css('height',$(this).data('height'));
});

I am using CSS transition, so I don't use the jQuery animate, but you could do animate just the same.