Hello, I'm having some problems with Javascript and hope to find the help I need here.

I will explain what I want to achieve first.

I want 6 bars beneath eachother. when you click on one of the bars the info beneath it slides in with scriptaculous.

On top of those 6 bars there's a div layer saying "You can click on one of these bars to show more info" when clicking any of the bars this layer should be hidden.

On each bar there is an arrow > when moving mouse over the arrow goes \/ when the info is shown the arrow is supposed to be like ^.


What I have done/achieved so far:
When clicking on a bar the info shows up.
when moving mouse over the bar it shows the \/ arrow on the bar (does not work in IE7, does work in FF)
when clicking on a bar the help div layer hides.

Here is an example:

http://www.desiredesign.org/slideexample/

I will explain how I achieved this.

Code:
function change_visibility(div_id)
{
document.getElementById('popup').style.display = (div_id == 'popup') ? 'none': 'show';
document.getElementById('d1').style.display = (div_id == 'popup') ? 'show': 'none';
}

<body onLoad="change_visibility('none');">

<a onclick="change_visibility('popup');change_visibility('d1');Effect.BlindDown('d1');; return false;" class="bar1">
bar content
</a>
This is what makes the popup hide on the click and the info div (d1) show up when clicking on the bar.

Applying it this way on all the bars would not be very wise I think there must be a better way. plus if I want the /\ image bar to show up I would hide the current bar after the click and make a second bar almost excactly the same but have a different image. plus it only seems to work in FireFox.

I hope someone here has tips how to achieve what I want.
If you need clarification on what I mean please ask and I will gladly explain what I mean.