Help with slideToggle() [jQuery]

[thesprucegoose]

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

<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>

jQuery

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

CSS: http://www.enkayes.com/portfolioRedux/css/style.css

URL:http://www.enkayes.com/portfolioRedux/

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.