jQuery simple expand/collapse list: problem in IE8 with static page height
Hi there,
I'm a bit new to jQuery and have been trying to make an expand/collapse (essentially accordion) list. So far, everything works and looks fine in Firefox, Safari, and Chrome, but in IE8, the page height is static when it loads, with a page height being as if all headers in the list were expanded. The expand/collapse functionality works, but as you can imagine, there is this big gap of space after the list.
The html markup uses <h2> tags for the always-visible header portion and a <div> for the expanding/collapsing content. The <div> content contains form elements and everything is enclosed in a form tag.
I don't feel this issue is too complex so if anyone can provide any advice, it would be greatly appreciated. I haven't had much luck searching. Maybe I'm just not familiar with what to call it.
Anyways, here is the jQuery code:
- $(document).ready(function() {
$('<img src="plus.png" class="icon" />').prependTo('.header');
$('.content').hide();
$('.header').click(function() {
if ($(this).next().is(':visible')) {
$(this).find(":first-child") .attr({
src : 'plus.png'
});
}
else {
$(this).find(":first-child") .attr({
src : 'minus.png'
});
}
$(this).next().slideToggle(600);
});
});