Display=none on all other UL's except current one in MENU?

[amory_tarr]

I have three subsections of my menu -- places of interest, boarding and comparisons. When clicked, each will reveal a UL with a set of links. When I click on each of the three titles, I want any of the other two to change their display to none. Can someone give me a starting point to go on? Here is the webpage.


Thanks

[glenngv]

function hideULs(exceptId, containerId){
   var obj = (containerId) ? document.getElementById(containerId):document;
   if (obj && obj.getElementsByTagName){
      uls = obj.getElementsByTagName("UL");
      for (var i=0;i<uls.length;i++){
         if (uls[i].id!=exceptId){
            uls[i].style.display="none";
         }
      }
   }
}

function WM_toggle(id){
   var obj = document.getElementById(id);
   obj.style.display = (obj.style.display == "none") ? "block":"none";
   if (obj.style.display=="block") hideULs(id, "layout-mainright");
   return false;
} 
...
<div id="layout-mainright">
<br />

<h4><a href="#" onclick="return WM_toggle('navigation');">Places of interest</a></h4>
...