jQuery - animate / slide to height: 100%

Question

I have a siple code here:

$('.aktualita_sipky').toggle(function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: "100%",
      }, 1500 );
}, function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: "120px",
      }, 1500 );
});

Now when I click it as the first 'toggle', it just shows instantly (without the animation), when I click the the second 'toggle', it nicely slides up.

Is there a way to slide it down to 100% with that nice animation?

Answer 1

Maybe you could do something like:

$height = $(window).height();   // returns height of browser viewport
//Or
$height = $(document).height(); // returns height of HTML document
//Or
$height = $(whatever).height();
$('.aktualita_sipky').toggle(function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: $height + 'px',
      }, 1500 );
}, function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: $height + 'px',
      }, 1500 );
});

http://docs.jquery.com/CSS/height

Answer 2

My workaround for this was to add up the heights of the child elements in the div, adding a little bit to account for margins:

function() {
  $('.accordionblock.open').removeClass('open');
  var childrenheight = 0;  $(this).children().each(function() {childrenheight += ($(this).height()*1.2)});
  $(this).animate({height:childrenheight},300).addClass('open');
  }
}