Height not setting to the actual height of the div

I have a DIV that slides open to the heigh开发者_运维技巧t of the content, but for some reason on divs that have no content it's calculating the height wrong.

The 2nd blog entry down (Thoma) is a good example when expanded.

http://dririser.co.uk/index.php

The 'data-height' is 108px but it's setting the height of the DIV to 360px. The DIVs with content in work fine, it sets the correct height but seems to come to the wrong calculation on DIVs with no content in.

This is basically the jist of the code.

Set the hight as a value on the div.

$(".articleSlide").each(function () {
    var current = $(this);
    current.attr("data-height", current.height());
});

Set a variable then apply the height.

$(".showTeamList").toggle(function() {
    var open_height = $(".articleSlide").attr("data-height") + "px";
    $(this).parent().parent().animate({"height": open_height}, "slow" );
 }, function() {
    $(this).parent().parent().animate({"height": "35"}, "slow" );
});

Your problem is that this line:

$(".articleSlide").attr("data-height")

Will only ever find the first element with class .articleSlide then use the data-height of that. You want it to find the data-height of the element that is specific for that button., just like you did with:

 $(this).parent().parent().animate({"height": open_height}, "slow" );

Try:

$(this).parents(".articleSlide").attr("data-height");

height() "Get the current computed height for the first element in the set of matched elements."

it has the correct behavior because the computed height is none. you need to wrap the elements in an absolutely positioned container with overflow:hidden;height:0;