Ein-/Ausblenden von Menüunterpunkten

[lesliejul]

Hallo :)
Auf meiner Seite habe ich ein Menü mit verschieden vielen Unterpunkten. Diese sollen bei Klick auf den dazu gehörigen Menüpunkt eingeblendet werden und bei Klick auf einen anderen Menüpunkt wieder ausgeblendet werden. Ist ein Unterpunkt ausgewählt sollen die Unterpunkte dieses Bereichs eingeblendet bleiben.
Das funktioniert soweit auch. Ausgewählte Unterpunkte bleiben eingeblendet, bei Klick auf einen Menüpunkt werden dessen Unterpunkte eingeblendet und solange kein Unterpunkt ausgewählt ist blenden sich diese auch wieder richtig aus.. nur wenn ein Unterpunkt gewählt ist, werden nur darüber liegende Unterpunkte ausgeblendet, die darauf folgenden eingeblendeten Unterpunkte bleiben jedoch immer eingeblendet.

Mein javascript schaut wie folgt aus:

  
function punkt1 () {  
  if (document.getElementById)  
    document.getElementById("punkt1").style.display = "inline";  
    document.getElementById("punkt2").style.display = "none";  
    document.getElementById("punkt3").style.display = "none";  
    document.getElementById("punkt4").style.display = "none";  
  
  
function punkt2 () {  
  if (document.getElementById)  
    document.getElementById("punkt2").style.display = "inline";  
    document.getElementById("punkt1").style.display = "none";  
    document.getElementById("punkt3").style.display = "none";  
    document.getElementById("punkt4").style.display = "none";  
}  
  
  
function punkt3 () {  
  if (document.getElementById)  
    document.getElementById("punkt3").style.display = "inline";  
    document.getElementById("punkt1").style.display = "none";  
    document.getElementById("punkt2").style.display = "none";  
    document.getElementById("punkt4").style.display = "none";  
}  
  
  
function punkt4 () {  
  if (document.getElementById)  
    document.getElementById("punkt4").style.display = "inline";  
    document.getElementById("punkt1").style.display = "none";  
    document.getElementById("punkt2").style.display = "none";  
    document.getElementById("punkt3").style.display = "none";  
}  

Der dazu gehöriger html-code:

  
<a href="javascript:punkt1()">punkt1</a><BR>  
	  
<p id="punkt1<? if($paktiv == "punkt1") echo "_aktiv"; ?>">  
	<a class="navi<? if($upaktiv == "punkt1up1") echo "_aktiv"; ?>" href="p1up1.php">Unterpunkt1</a><BR>  
	<a class="navi<? if($upaktiv == "punkt1up2") echo "_aktiv"; ?>" href="p1up2.php">Unterpunkt2</a><BR>  
	<a class="navi<? if($upaktiv == "punkt1up3") echo "_aktiv"; ?>" href="p1up3.php">Unterpunkt3</a>  
</p>  
  
  
	  
<a href="javascript:punkt2()">punkt2</a><BR>  
	  
<ul><p id="punkt2<? if($paktiv == "punkt2") echo "_aktiv"; ?>">  
	<a class="navi<? if($upaktiv == "punkt2up1") echo "_aktiv"; ?>" href="p2up1.php">Unterpunkt1</a>  
</p></ul>  
	  
  
  
<a href="javascript:punkt3()">punkt3</a><BR>  
	  
<ul><p id="punkt3<? if($paktiv == "punkt3") echo "_aktiv"; ?>">  
	<a class="navi<? if($upaktiv == "punkt3up1") echo "_aktiv"; ?>" href="p3up1.php">Unterpunkt1</a><BR>  
	<a class="navi<? if($upaktiv == "punkt3up2") echo "_aktiv"; ?>" href="p3up2.php">Unterpunkt2</a>  
</p></ul>  
	  
  
  
<a href="javascript:punkt4()">punkt4</a><BR>  
	  
<ul><p id="punkt4<? if($paktiv == "punkt4") echo "_aktiv"; ?>">  
	<a class="navi<? if($upaktiv == "punkt4up1") echo "_aktiv"; ?>" href="p4up1.php">Unterpunkt1</a><BR>  
	<a class="navi<? if($upaktiv == "punkt4up2") echo "_aktiv"; ?>" href="p4up2.php">Unterpunkt2</a><BR>  
	<a class="navi<? if($upaktiv == "punkt4up3") echo "_aktiv"; ?>" href="p4up3.php">Unterpunkt3</a>  
</p></ul>  

Leider kenn ich mich mit Javascript noch nicht so gut aus, um mein Problem selbst zu lösen. Ich hoffe ich konnte mein Problem verständlich ausdrücken und bin für jede Hilfe dankbar :)
Liebe Grüße