getElementById switch menu needs to close previous selection after swi

[graphikjunkie]

Hi, I have this rather neat v small piece of code that allows a drop-down menu from a simple unordered list. There are two particular links in the list which open into a second level with more links.

Please see the js and xhtml snippets below. When a user clicks on products he/she should see products 1,2,3,4 but if he/she then clicks on 'services' the 'products' dropdown should close itself and display services 1,2,3,4

Right now, the menu works as planned except for the closing. How do I add a function to close the previous ul after the id has been switched?

Any help would be greatly appreciated.

javascript:

function switchUl(id){
 if(document.getElementById){
 a=document.getElementById(id);
 a.style.display=(a.style.display!="none")?"none":"block";
 }
 }
 for(i=0;i<200;i++) 
{
 break;
 }

xhtml:

<ul>
<li><a href="index.asp"><span>Home</span></a></li>
<li><a class="current"><span>About</span></a></li>
<li><a href="login.asp"><span>Login</span></a></li>
<li><a href="#" onclick="switchUl('f0');"><span>Products</span></a>
<ul style="display: none;" id="f0">
<li><a href="p1.asp"><span>product 1</span></a></li>
<li><a href="p2.asp"><span>product 2</span></a></li>
<li><a href="p3.asp"><span>product 3</span></a></li>
<li><a href="p4.asp"><span>product 4</span></a></li>
<li><a href="p5.asp"><span>product 5</span></a></li>
</ul>
</li>
<li><a href="#" onclick="switchUl('f1');"><span>Services</span></a>
<ul style="display: none;" id="f1">
<li><a href="s1.asp"><span>service 1</span></a></li>
<li><a href="s2.asp"><span>service 2</span></a></li>
<li><a href="s3.asp"><span>service 3</span></a></li>
</ul>
</li>
<li><a href="clients.asp"><span>Client List</span></a></li>
<li><a href="contact.asp"><span>Contact us</span></a></li>
</ul>

[Birdman]

This should work but if you were to start adding more elements to show/hide you would want to think about another solution.

onclick="switchUl('f0','f1');

function switchUl(id,id2){
if(document.getElementById){
document.getElementById(id).style.display="block";
document.getElementById(id2).style.display="none";
}
}
for(i=0;i<200;i++)
{
break;
}

[graphikjunkie]

Thanks man!

Such a simple fix, though I do see it's limitations. I'll be sure to keep that in mind.

Good job.