...

View Full Version : Help with slideToggle() [jQuery]



thesprucegoose
11-30-2009, 06:20 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum