Gibt es hier eine Möglichkeit?

[Rolf]

Guten Abend zusammen!

Ich habe mir eine Navigation erstellt, bei der sich durch Klick auf ein Haupmenü-Eintrag, ein Untermenü öffnet. Auf- und einklappen funktioniert tadellos. Ich würde es aber gerne realisieren, dass wenn ich irgend ein Untermenü öffne, sich das vorher geöffnete automatisch schliesst. Ist dies machbar? (Ich bin nicht gerade Sattelfest in JavaScript und Google konnte mir nicht weiterhelfen)

Bei deaktiviertem JavaScript, ist im übrigen einfach der ganze Verzeichnisbaum sichtbar.

Hier der Verzeichnisbaum:

<div id="navigation">  
  
<ul class="main_menue">  
  
    <li class="main_menue">Startseite</li>  
  
    <li class="main_menue">  
    <a href="/" onclick="toggle('mannschaften');return false"><span class="year">Mannschaften</span></a>  
        <ul id="mannschaften">  
            <li>Herren 1</li>  
            <li>Frauen 1</li>  
            <li>Herren 2</li>  
            <li>Frauen 2</li>  
            <li>M-U19</li>  
            <li>F-U19</li>  
            <li>M-U17</li>  
            <li>F-U15</li>  
            <li>U13</li>  
            <li>U9 / U11</li>  
        </ul>  
    </li>  
  
    <li class="main_menue">  
    <a href="/" onclick="toggle('handballriege');return false"><span class="year">Handballriege</span></a>  
        <ul id="handballriege">  
            <li>Vorstand</li>  
            <li>Leitbild</li>  
            <li>Hallen</li>  
            <li>Fan Ecke</li>  
            <li>Schiedsrichter</li>  
            <li>Funktion&auml;re</li>  
            <li>Chronik</li>  
            <li>Mitgliedschaft</li>  
            <li>Ehrenmitglieder</li>  
        </ul>  
    </li>  
  
    <li class="main_menue">Agenda</li>  
    <li class="main_menue">Berichte</li>  
  
    <li class="main_menue">  
    <a href="/" onclick="toggle('events');return false"><span class="year">Events</span></a>  
        <ul id="events">  
            <li>Sch&uuml;lerturnier</li>  
            <li>Kost&uuml;mball</li>  
            <li>Sommerlager</li>  
        </ul>  
    </li>  
  
    <li class="main_menue">Sponsoring</li>  
  
    <li class="main_menue">  
    <a href="/" onclick="toggle('services');return false"><span class="year">Services</span></a>  
        <ul id="services">  
            <li>G&auml;stebuch</li>  
            <li>Fotogalerie</li>  
            <li>Weblinks</li>  
            <li>Downloads</li>  
        </ul>  
    </li>  
  
    <li class="main_menue">Kontakt</li>  
</ul>  
  
    <script type="text/javascript">  
        toggle('mannschaften');  
         toggle('handballriege');  
          toggle('events');  
           toggle('services');  
    </script>  
  
</div>

Und hier das Script:

  function toggle(layerId){  
  
  
    try{  
      var layer = document.getElementById(layerId);  
      layer.isDisplayed=!layer.isDisplayed;  
      if(layer.isDisplayed){  
        hide(layerId);  
      } else {  
        display(layerId);  
      }  
        } catch (ex){  
    }  
  }  
  
  function hide(  layerId){  
    try{  
      document.getElementById(layerId).style.display="none";  
    } catch (ex){  
    }  
  }  
  
  function display( /* String */  layerId ){  
    try{  
      document.getElementById(layerId).style.display="block";  
    } catch (ex){  
    }  
  }

Ich danke Euch allen für mögliche Anregungen und wünsche noch einen schönen Abend.

Gruss Rolf