Get the actual height of a partially hidden div using jquery

Question

I have a list of collapsible elements with a minimum height of 75 pixels. Anything greater than 75 pixels is hidden using "overflow: hidden". Each item may have different actual heights depending on its contents. Is there a way that I can get the actual height of each element using jquery, although I limited its height to 75 pixels using css. Using .height () returns 75px, not the actual height of the element.

Here's the html:

<li class="parent">  
      <input type="button" id="expand" />
      <span></span>
      <span></span>         
      <span></span>
      <span></span>         
      <span></span>
</li> 

At first, only the first 2 spaces are displayed. And here is jquery (attached to a button click event)

$("#expand").parent().animate({'height':??},1000);

Do I need to dynamically replace ??? with the actual height of the list item so that it expands to full height when the button is clicked.

Any help would be appreciated.

Cheers,

Answer 1

, height:auto :

var $ep = $("#expand").parent(),
    epOldH = $ep.height(),
    epNewH;

$ep.css('height', 'auto');
epNewH = $ep.height();
$ep.css('height', epOldH);

$('#expand').click(function() {
    $ep.animate({'height': epNewH}, 1000);
});

.

Answer 2

javascript scrollHeight.

$("#id_element").attr('scrollHeight')

Answer 3

Maba you should try with the property "innerHeight" / "clientHeight".