slideToggle() help needed (IE7)

Hello,

I have a slideToggle() on a hidden <div> that should push other elements around it down and then slide back up when it’s hidden again.

It works in IE8/FF/Chrome/Safari, but not in IE7 or IE6 (Which is a different beast entirely).

I’ve looked at this thing for hours and can’t figure it out. I’d appreciate any extra eyes on this while I work on it.

Cheers,

–nks

HTML

[CODE]
<ul id=”main-nav”>
<li id=”nav-about”>&nbsp;</li>
<li id=”nav-work”>&nbsp;</li>

<div id=”hidden-work”>
<ul>
<li id=”item-nastar”>nastarcenter.com</li>
<li id=”item-wildearthride”>wildearthride.com</li>
<li id=”item-amtiusa”>amtiusa.com</li>
<li id=”item-wildcards”>wildcards</li>
<li id=”item-snowleopard”>snow leopard conservation</li>
<li id=”item-brainwave”>brainwave synthesis</li>
<li id=”item-parasite”>parasite</li>
<li id=”item-banana”>banana set</li>
<li id=”item-photocollage”>philadelphia photo collage</li>
<li id=”item-typography”>typography experiments</li>
</ul>
</div>

<li id=”nav-contact”>&nbsp;</li>
</ul>
[/CODE]

jQuery

[CODE]
/* HIDE NAV ELEMENTS */

$(‘#about-box’).hide();
$(‘#hidden-work’).hide();
$(‘#contact-form’).hide();

/* NAVIGATION FLAVOR */

$(“#nav-about”).click(function () {

if( $(‘#hidden-divs div’).is(‘:visible’)) { $(‘#hidden-divs div:visible’).slideToggle(400); }
if( $(‘#nav-work’).is(‘.work-clicked’)) { $(‘#nav-work’).removeClass(‘work-clicked’); }
if( $(‘#nav-contact’).is(‘.contact-clicked’)) { $(‘#nav-contact’).removeClass(‘contact-clicked’); }
if( $(‘#hidden-work ul li’).is(‘.clicked-item’)) { $(‘#hidden-work ul li’).removeClass(‘clicked-item’); }
$(this).addClass(‘about-clicked’);
$(‘#about-box’).slideToggle(400);
if( $(‘#contact-form’).is(‘:visible’)) { $(‘#contact-form’).slideToggle(400); }
if( $(‘#hidden-work’).is(‘:visible’)) { $(‘#hidden-work’).slideToggle(400); }

});

$(“#nav-work”).click(function () {
if( $(‘#hidden-divs div’).is(‘:visible’)) { $(‘#hidden-divs div:visible’).slideToggle(400); }
if( $(‘#nav-about’).is(‘.about-clicked’)) { $(‘#nav-about’).removeClass(‘about-clicked’); }
if( $(‘#nav-contact’).is(‘.contact-clicked’)) { $(‘#nav-contact’).removeClass(‘contact-clicked’); }
if( $(‘#hidden-work ul li’).is(‘.clicked-item’)) { $(‘#hidden-work ul li’).removeClass(‘clicked-item’); }
$(this).addClass(‘work-clicked’);
$(“#hidden-work”).slideToggle(400);
if( $(‘#contact-form’).is(‘:visible’)) { $(‘#contact-form’).slideToggle(400); }
if( $(‘#about-box’).is(‘:visible’)) { $(‘#about-box’).slideToggle(400); }

});

$(“#nav-contact”).click(function () {
if( $(‘#hidden-divs div’).is(‘:visible’)) { $(‘#hidden-divs div:visible’).slideToggle(400); }
if( $(‘#nav-work’).is(‘.work-clicked’)) { $(‘#nav-work’).removeClass(‘work-clicked’); }
if( $(‘#nav-about’).is(‘.about-clicked’)) { $(‘#nav-about’).removeClass(‘about-clicked’); }
if( $(‘#hidden-work ul li’).is(‘.clicked-item’)) { $(‘#hidden-work ul li’).removeClass(‘clicked-item’); }
$(this).addClass(‘contact-clicked’);
$(“#contact-form”).slideToggle(400);
if( $(‘#hidden-work’).is(‘:visible’)) { $(‘#hidden-work’).slideToggle(400); }
if( $(‘#about-box’).is(‘:visible’)) { $(‘#about-box’).slideToggle(400); }
});
[/CODE]

CSS: [URL=”http://www.enkayes.com/portfolioRedux/css/style.css”]http://www.enkayes.com/portfolioRedux/css/style.css[/URL]

URL:[URL=”http://www.enkayes.com/portfolioRedux/”]http://www.enkayes.com/portfolioRedux/[/URL]

P.S. I’m aware it doesn’t validate because of the closed <li> before the #hidden-work <div>. I changed it to validate and it broke it in all browsers.

Also in #JavaScript _↴