Help with a basic function

[blasterstudios]

I have a script i'm using from dynamic drive that i'm trying to alter slightly to add a 3rd level navigation. So i'm combining 2 of their scripts. It was pretty well on most browsers except for 1 thing.

When you roll-over a link that calls this function, somewhere in the function instead of doing what it's doing, i need it to perform a simple if statement. I know php pretty well, but i still struggle with javascript a little bit.

what i think it's doing is when you rollover the link once, it make's is associated div display:block;
when you rollover it a second time it makes the div display:none;

what i want it to do is if the associated div is already set to display: block, i want it to simply make sure all other divs are set to display:none. then, if the div is set to display: none, obviously it needs to change it to display: block.

If you view the script here:

http://www.highgroundsolutions.com/dev/main.php

You will see that if you roll over the link (under Our products > Academic Calendars) it doesn't stay consistently open. It will open and close depending on how many times you roll over the link to the submenu.

Ok, here's the function that's doing all this:

function SwitchMenu(obj){
		if(document.getElementById){
		var el = document.getElementById(obj);
		var ar = document.getElementById("masterdiv").getElementsByTagName("div"); //DynamicDrive.com change
			if(el.style.display != "block"){ //DynamicDrive.com change
				for (var i=0; i<ar.length; i++){
					if (ar[i].className=="submenu1" || ar[i].className=="submenu2" || ar[i].className=="submenu3" || ar[i].className=="submenu99") //DynamicDrive.com change
					ar[i].style.display = "none";
				}
				el.style.display = "block";
			}else{
				el.style.display = "none";
			}
		}
	}

And here is the place that is calling the function:

<a href="#" onMouseOver="SwitchMenu('sub1')">Academic Calendars</a>

And this is the submenu div that is appearing/disappearing:

<div class="submenu1" id="sub1" style="display:none;">
				<a href="#"><span style="text-decoration:none">- </span>Elementary School</a>
				<a href="#"><span style="text-decoration:none">- </span>Middle School</a>
				<a href="#"><span style="text-decoration:none">- </span>High School</a>
				<a href="#"><span style="text-decoration:none">- </span>College/University</a>
			</div>

Note: in this submenu (sub1), the style has been set to display:none, because for some reason, when you load the page and move your cursor over Our products, when the menu drops down, that submenu is already visible without having to roll over Academic Calendars. No other submenu's did this.

Thanks for the help, and I hope I explained exactly what I want to do clearly.

 

[blasterstudios]

bump

 

[blasterstudios]

Please help. This should be an easy fix.

 

[blasterstudios]

anyone?

 

[cLFlaVA]

to loop through ALL divs in a document and switching their display style back and forth, first ensure each has a display style set. then do something along these lines (you will need to modify this for your script)

function doSwitch( divId ) {
    var dCol = document.getElementsByTagName("div");
    for ( var i = 0; i < dCol.length; i++ ) {
        dCol[i].style.display = ( dCol[i].id == divId ) ? "display" : "none";
    }
}

*cLFlaVA
----------------------------

[URL unfurl="true"]http://www.coryarthus.com/[/url]