Question

I am new to jquery.. I’m having to animate a div to a certain height.. And again on the next click, i need to animate it to height auto. I am able to animate only when i provide the height in px.. here is my code.. can any1 suggest how to find the height of the div on page load.

 $("#photobutton").click(function(){
                          var $text = $("#photobutton").text();

                         if($text == "hide photos") 
                         {
                            $("#photocontainer").animate({height: '144px'}, 1000);
                            $("#photobutton").text("more photos");
                         }
                         else if($text == "more photos")
                         {
                            $("#photocontainer").animate({height: '100%'}, 1000);

                            $("#photobutton").text("hide photos");
                         }

                      });

on the if condition i want the div to collapse to height144px.. and in the else conditions i want the div to stretch to its full height to display all the elements..

Answer 1

In your second animate() call, assuming you want this div to fill the height of its parent, use:

$("#photocontainer").animate({height: $("#photocontainer").parent().height()+'px'}, 1000);

EDIT

1. Example of animating height to fill parent’s height: http://jsfiddle.net/techfoobar/HXjfe/

2. Example of animating height to fill window’s height: http://jsfiddle.net/techfoobar/C37rs/1/

EDIT #2

Animating to auto height: http://jsfiddle.net/techfoobar/psexn/3/

jQuery’s animate function will not animate to auto height by itself. In fact, it will not animate to any height that cannot be determined prior to the animation.

We can however get it to do it. But it involves a rather ugly hack. The hack is to hide the div, set height to auto, note the height, revert the height and visibility. Once we have the target height, animate it.