Ajax help => Scriptculous

[bigtalk]

Hello,

I'm a noob with PHP and unversed in Javascript, but I need to implement some Ajax in a page I'm building. I'm using the Scriptaculous libraries.

Here's the problem I'm having:
I have four different links in the menubar. When I click on the first link, it makes a div block appear using the effect "Appear". If I click the same link again, the div fades Effect.toggle . This works great. Now, I click on a new link and it does the same thing. Great. The problem arises if I have already clicked on link "A" and the div is showing and I then click on link "B". The div associated with link "B" appears over the div associated with link "A".

The help I'm asking:
When I click a link, it should first try to fade any visible div and then make its associated div appear.

This is what I've been trying (it doesn't quite work though):

my combo.js script:

Effect.OpenUp = function(element) {
  element = $(element);
  new Effect.Appear(element, arguments[1] || {});
}

Effect.CloseDown = function(element) {
  element = $(element);
  new Effect.Fade(element, arguments[1] || {});
}

Effect.Combo = function(element) {
  element = $(element);
  if(element.style.display != 'none') {
    new Effect.CloseDown(element, arguments[1] || {});
    setTimeout('Effect.OpenUp(element, arguments[1] || {})', 250)
  }
  else { new Effect.OpenUp(element, arguments[1] || {}); }
}

My menubar:

<div id="menubar"> 
<a href="#" onclick="Effect.Combo('box',{duration: .8});">about</a><br /><br /><br />
<a href="#" onclick="Effect.Combo('box',{duration: .8});">tracks</a>
</div>

My dispaying page:

<div id="box" style="display:run-in;">
<p>Content Stuff.</p>
</div>

Thank you for any help!

[bigtalk]

SO, I guess it does work. I just needed to change:

setTimeout('Effect.OpenUp(element, arguments[1] || {})', 250)

in my combo.js file to:

setTimeout('Effect.OpenUp("box",{duration: 0.8});', 1000)

and it works. If anyone knows a cleaner way, please share. Again, I don't really know what I'm doing.

Thanks for any comments!