JS: onclick

[dusselmops]

Hallo...ich hab mir ne Funktion gebastelt bei der nach einem Klick ein verstecktes div geöffnte wird. Klappt soweit auch ganz gut.

<script type="text/javascript">
function klappentext(id) {
 with(document.getElementById(id).style) {
  if(display=="none") {
   display="block";
  }
   else {
    display="none";
   }
 }
}
</script>

<a href="#" onClick="klappentext('verein');"><b>Verein</b></a> | <a href="#" onClick="klappentext('management);"><b>Management</b></a> | <a href="#" onClick="klappentext('sponsoren');"><b>Sponsoren</b></a> | <a href="#" onClick="klappentext('chronik');"><b>Chronik</b></a>

<div id="Verein" style="display: none;">Lorem Ipsum</div>
<div id="management" style="display: none;">Lorem Ipsum</div>
<div id="sponsoren" style="display: none;">Lorem Ipsum</div>
<div id="chronik" style="display: none;">Lorem Ipsum</div>

Jetzt will ich aber, dass wenn wenn man auf einen Link klickt. Alle div's auf hidden gesetzt werden bis auf das was man öfnnen wollte, sodass nie alle divs auf einmal offen sein können.

 

[dominicbauer]

Meinst du so 'ne Art Akkordeon...?

 

[Salkin]

<script type="text/javascript">
function klappentext(id) {
 with(document.getElementById(id).style) {
  if(display=="none") {
   document.getElementById("Verein").style.display="none";
   document.getElementById("management").style.display="none";
   document.getElementById("sponsoren").style.display="none";
   document.getElementById("chronik").style.display="none";
   display="block";
  }
   else {
    display="none";
   }
 }
}
</script>

<a href="#" onClick="klappentext('verein');"><b>Verein</b></a> | <a href="#" onClick="klappentext('management);"><b>Management</b></a> | <a href="#" onClick="klappentext('sponsoren');"><b>Sponsoren</b></a> | <a href="#" onClick="klappentext('chronik');"><b>Chronik</b></a>

<div id="Verein" style="display: none;">Lorem Ipsum</div>
<div id="management" style="display: none;">Lorem Ipsum</div>
<div id="sponsoren" style="display: none;">Lorem Ipsum</div>
<div id="chronik" style="display: none;">Lorem Ipsum</div>

Hi, eine relativ einfache lösung wäre es einfach alle zu schließlen(verstecken), und dann anschließend das neue zu öffnen(zeigen).