jQuery outerheight not correct. Help Please!!!

[Marc Sanders]

Hi all,

Tearing my hair out here.

I am trying to have a read more link which is meant to slide the containing div down and fade in the content. Except the jQuery outerheight function is not correctly outputting the correct height for the containing div but giving a height about 38px shorter than it should be. Example code below:

HTML

Code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.

Read More

CSS

Code:

p {
margin-top: 12px;
}

jQuery

Code:

$(document).ready(function() {
$(“.more”).css(‘display’, ‘none’);
$(“.view”).toggle(
function(includeMargin) {
$(“.view”).html(‘Read Less’);
var h = $(“.more”).outerHeight();
$(“.more”).css(‘height’, h);
$(“.more p”).css(‘display’, ‘none’);
$(“.more”).slideDown(500,
function() {
$(“.more p”).fadeIn(500);
}
);
},
function() {
$(“.more p”).fadeOut(500,
function() {
$(“.more”).slideUp(500);
}
);
$(“.view”).html(‘Read More’);
}
);
});

[jamygolden]

I checked out your demo and it seems to be working perfectly. I tested it in Firefox, Chrome and IE 8.
Btw, the second

Code:

$(“.more p”).css(‘display’, ‘none’);

is unnecessary.

[Author]

Posts