How exactly does jQuery.slideDown / Up () process a slide to an unknown (auto) height?

Question

I want to push down (show) this DIV, which has an initial height 0px:

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

However, the final height is unknown due to different screen widths, font sizes and other materials that affect the internal layout and, therefore, the height of the target.

If I need to do this manually, I will show it with visibility:hidden;, measure the height, and then animateto a known height (this also has drawbacks).

I have mixed results with jQuery .slideDown()- in the documentation in which it works, but in this particular case it does not work.

How can jQuery know the final height?

Edit: One workaround is to have another inner div with height:auto;which will be used to measure height.

Answer 1

This is a little old question. I originally searched for the answer to the same problem, your editing was exactly what 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 this helps anyone who has the same issue.

Answer 2

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

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