Add a class to each div you want faded and remove the inline handler .... create a function that listens to click on the href's....
then do something like function handleFade(element) { $$('.the-class-name-for-the-faded-elements').each(function(e) { Effect.toggle(e,'fade'); // fades out all elements Effect.toggle(element,'appear'); // reappears the one that was clicked... }); } Or something like function handleFade(element) { Effect.toggle(element,'appear'); // appear in the cliked element $$('.the-class-name-for-the-faded-elements').each(function(e) { if(e!=element) { Effect.toggle(e,'fade'); // fades out all other elements that were not clicked } }); } hope this helps Alex ----- Original Message ----- From: <jess...@gmail.com> To: "Prototype & script.aculo.us" <prototype-scriptaculous@googlegroups.com> Sent: Friday, December 12, 2008 6:24 PM Subject: [Proto-Scripty] Fade away problem (Newbie) > > Hello everyone, I was wondering if someone might be able to help me. > > I have 4 links that toggle the opacity of 4 seperate divs, this works > great I have the z-index swapping and the opacity fading. > > The Problem: When I select one section I want the remaining 3 divs to > fade away. For example if I click a link it fades in and the 3 divs > remaining that I did not select fade away. Any help is really > appreciated. > > > code looks something like this: > > <!-- My slides where content fades in --> > <div id="slideWrap"> > <div id="slide-deck" align="center"> > <p></p> > </div> > <div id="fade-quicktime" align="center"> > <p>QUICKTIME</p> > </div> > <div id="fade-flash" align="center"> > <p>FLASH</p> > </div> > <div id="fade-smil" align="center"> > <p>SMIL</p> > </div> > <div id="fade-windows" align="center"> > <p>WINDOWS</p> > </div> > </div> > <!-- end slides --> > > > > <!-- my categories, navigation that triggers content to fade in and > out --> > <div class="slideNavigation"> > > <!-- quicktime --> > <div id="quicktime"> > <a href="#" onclick="Effect.toggle('fade- > quicktime','appear'); return false;" ><img alt="category 1" > src="images/streamingSkin/logo.png" /></a> > <h1>Quick Time</h1> > </div> > > <!-- flash --> > <div id="flash"> > <a href="#" onclick="Effect.toggle('fade-flash','appear'); > return false;" ><img alt="category 1" src="images/streamingSkin/ > logo.png" /></a> > <h1>Flash</h1> > </div> > > > <!-- SMIL --> > <div id="smil"> > <a href="#" onclick="Effect.toggle('fade-smil','appear'); > return false;" ><img alt="category 1" src="images/streamingSkin/ > logo.png" /></a> > <h1>SMIL</h1> > </div> > > > <!-- Windows Media --> > <div id="windows"> > <a href="#" onclick="Effect.toggle('fade-windows','appear'); > return false;" ><img alt="category 1" src="images/streamingSkin/ > logo.png" /></a> > <h1>Windows Media Player</h1> > </div> > </div> > > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---