how do i animate a specific height to 100% in jquery

Question

i want to have a little "preview" of the content in the div, so i made it so small that only only the first line is shown. now i want to animate it that when you click the title, the div will have the height of 100%, but when i use animate(height:"100%") there is no nice sliding.

<a href="javascript:void(0);" class="show_it">title:</a>
<div>
    content<br>
    content_hidden
</div>

<script>
$('.show_it').click(function() {
  $(this).next("div").animate({
    height: 'auto'
  }, 1000, function() {
  });
});
</script>

<style>
div{
    height:20px;
    overflow:hidden;
}
</style>

Answer 1

Although I am sure there is a better way of doing this as this method is sloppy AT BEST, if you don't find another solution you could always try this:

$('.show_it').click(function() {

// Animate to 100% in 1 millisecond
$(this).parent().next("div").animate({height: 'auto'}, 1);

// Record the height of the div
var newHeight = $(this).parent().next("div").height();

// Animate height to 0% in 1 millisecond
$(this).parent().next("div").animate({height: '0px'}, 1);

// Do the animation using the new fixed height.
  $(this).parent().next("div").animate({
    height: newHeight,
  }, 1000, function() {
  });
});

However, as I said this is very sloppy - if it fits your needs, try jquery slideDown(); this is a much better way to do it.

Answer 2

Or this:

$('.show_it').click(function(){
   $(this).parent().next("div").css("height", "100%");
   var h = $(this).parent().next("div").height();
   $(this).parent().next("div").css("height", "0px");
   $(this).parent().next("div").animate({height: h}, 1000, function() {
   });
});

Answer 3

Try this

$('.show_it').click(function() {
  var $div = $(this).parent().next("div");
  var h = $div.children().each(function(){ h = h+ $(this).height(); });
  $div.animate({
    height: h
  }, 1000, function() {
  });
});