natural .height() of an element with set height and overflow hidden

natural .height() of an element with set height and overflow hidden

Trying to get the height of an element whose height is specified in the CSS.

So I am trying to animate the height of an item, where I have:
  1. <img id="myButton" src="myimage.jpg" />
  2. <div id="myDiv" style="height:50px;overflow:hidden">
  3. asdklf
  4. as;df
  5. asdf
  6. asdf
  7. asdf
  8. asdf
  9. asdf
  10. asdf
  11. </div>

Now I the height specified to start with so that I can toggle it with a button. However, I would like to animate this so that the height gets animated from "height:50px;" to "height:auto;"

Any ideas on how to do this?

I tried:

  1. var myHeight = $('#myDiv').height();
  2. $('#myButton').toggle(function(){
  3.  $('#myDiv').animate({height: myHeight});
  4.  $('#myDiv').css({'overflow' : 'visible'});
  5. },
  6. function(){
  7.  $('#myDiv').animate({height: 50});
  8.  $('#myDiv').css({'overflow' : 'hidden'});
  9. }
  10. })
However, it only registers as 50, even if the element is 500

any thoughts, let me know if I am not clear.