Get actual height of partially hidden div using jquery

Question

I've a list of collapsible items with a minimum height of 75px. Anything exceeding 75px is hidden using "overflow:hidden". Each item may have different actual heights depending on its content. Is there a way i can get the actual height of each item using jquery, even though i've limited its height to 75px using css. Using .height() returns 75px and 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>

Only the first 2 spans are shown initially. And here's the jquery (attached to button click event)

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

I need to dynamically replace the ?? with the actual height of the list element so it expands to its full height upon clicking the button.

Any help will be appreciated.

Cheers, Kartik Rao

i want the actual height of the list element. not the minimum height i set using css. — Kartik Rao, Jan 24 '11 at 11:56
You'll probably have to provide some of your HTML/JS to get an answer. Edit: I see you added the `overflow:hidden` sentence: that changes things. — thirtydot, Jan 24 '11 at 12:00
Purely theoretical here but can you clone the Node into a DOM Fragment, remove the min height CSS style and calculate the height? — James Hughes, Jan 24 '11 at 12:03
thirtydot - i've added the html & js code. kouPhax - thats a bit too complicated. i'm sure there's a simpler way of doing it. — Kartik Rao, Jan 24 '11 at 12:13
possible duplicate of [How do I get the real .height() of a overflow: hidden or overflow: scroll div?](http://stackoverflow.com/questions/2522579/how-do-i-get-the-real-height-of-a-overflow-hidden-or-overflow-scroll-div) — marcvangend, Dec 02 '13 at 14:08

score 4 · Accepted Answer · answered Jan 24 '11 at 12:57

I think the best solution is to set the height:auto to capture what the new height should be:

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);
});

Here is a working demo.

score 2 · Answer 2 · answered Jul 04 '13 at 15:46

2

You can also use the javascript's scrollHeight attribute.

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

answered Jul 04 '13 at 15:46

QuarK

2,306
1
20
24

1

This is a better and faster solution than the currently accepted answer. See also http://stackoverflow.com/questions/2522579/how-do-i-get-the-real-height-of-a-overflow-hidden-or-overflow-scroll-div, which uses a slightly different syntax: `$('#id_element')[0].scrollHeight`. – marcvangend Dec 02 '13 at 14:06

score 0 · Answer 3 · answered Jan 24 '11 at 12:02

0

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

answered Jan 24 '11 at 12:02

gion_13

41,171
10
96
108

Get actual height of partially hidden div using jquery

3 Answers3