Over: anzeigen, out: verstecken

[Code]

Hallo!
Ich habe mehrere Überschriften und nun möchte ich, dass wenn ich mit der Maus drüber fahre, der Text dazu angezeigt wird und wenn ich mit dem Mauszeiger diesen Bereich verlasse, er wieder zugeklappt wird und falls die Maus sich auf eine andere Überschrift bewegt, der dazu gehörige Text angezeigt wird.

Ich habe folgenden Code gefunden:

  
<script>  
 function toggle(theDiv) {  
     var elem = document.getElementById(theDiv);  
     elem.style.display = (elem.style.display == "none")?"":"none";  
}  
 //-->  
</script>  
 <div id="test">  
 <a href="#" onmouseout="toggle('testLayer1');return false;" onmouseover="toggle('testLayer1');return false;">Open and  

>Close</a>  

 </div>  
 <div id="testLayer1" style="display: none;">Text 1</div>  
  
 <div id="Div1">  
 <a href="#" onmouseout="toggle('testLayer1');return false;" onmouseover="toggle('testLayer2');return false;">Open and  

>Close</a>  

 </div>  
 <div id="testLayer2" style="display: none;">Text 2</div>

Zwar öffnet er diese Bereiche bei onmouseover, aber wenn ich die Maus öfters darüber bewege, so sind am Ende alle Bereiche sichtbar. Irgendwie müsste ich wohl einbauen, dass bei gleicher Zugehörigkeit, die anderen zugeklappt werden. Kann mir einer helfen?