How exactly jQuery's .slideDown/Up() handle slide to unknown (auto) height?

I want to slide down (show) this DIV that has 0px height initially:

<div id="toslide" style="height:0px;overflow:hidden;"> ... various content </div>

However the final height is not known be开发者_StackOverflow社区cause of various screen widths, font sizes and other stuff that affect the inside layout and therefore the target height.

If I would have to do it manually, I woudl show it with visibility:hidden;, measure the height and then animate it to the know height (this has, however, drawbacks too).

I have mixed results with jQuery's .slideDown() - in the documentation it works, but it doesn't work for me in this particular case.

How can jQuery know the final height?

Edit: one workaround is to have another inner div with height:auto; that would be used to measure height.

This is a bit an old question. I was original looking for an answer to the same problem, your edit was exactly was I was looking for.

JSFiddle for all the goodies

$("a#moreRequests").on("click", function(){// click this and the div grows

//console.log("this hits");
var friends = $(".friendsDiv");
var divHeight = $(".auto").height();

if(friends.hasClass("grow")){// if the div has the class grow on it, then shrink
  friends.animate({
    height: "100px"
  },1000, function(){
    console.log("this is if it has the class .grow,");
  }).removeClass("grow");
} 
else{
  friends.animate({
    height: divHeight
  },1000, function(){
    console.log("this is if it doesn't has the class .grow div height: " + divHeight);
  }).addClass("grow");
}
return false;
});

Hope that helps anyone with the same issue.

you should get the .height() of the elements in it, sum those up and make the height of the div that height :)

http://api.jquery.com/height/