Close a sub menu when another is selected??

[billyboy]

I'm using the following bit of code to toggle the display of submenus. The mark up is two levels of nested uls. And the CSS for the class names is simply .show {display:block;} and .hide {display: none;}.

Right now when Link 1 is selected that nested submenu opens, select again and it closes. Ditto with Link 2, Link 3, etc...

What I can't figure out, is how to close an nested submenu when a different link is selected. If the submenu nested in Link 1 is open and Link 2 is selected, for example, what needs to be added so the already open submenu closes while the new one opens.

Any help would be appreciated.

function toggle() {
var el=document.getElementById("menu").getElementsByTagName("li");
  for (i=0; i<el.length; i++) {
    el[i].className = "hide";
    el[i].onclick = function() {
      this.className = (this.className == "hide") ? "show" : "hide";
    }
  }
}

[billyboy]

Anyone? Any ideas at all?