✔ <tr> klappt nach dem Neuladen erst mit Doppelklick auf

[Mavericklp]

Moin moin zusammen.
Ich versuche gerade mit verstecken Inhalten zu Arbeiten. Ich habe ein Tabellen Design, bei dem 2 Reihen ausgeblendet werden und eine eingeblendet. Wenn jetzt ein Radio Butten angeklickt wird sollen alle ausgeblendet werden. Nur das passende soll eingeblendet werden. Soweit funktioniert auch alles.

Das Problem ist, das wenn die Seite neu aufgerufen wird (zum ersten mal, reload) dann wird alles zu geklapt und beim nächsten click wird das passende erst wieder aufgeklappt.

Zum Abluaf:
Das ganze ist ein Passwort generator mit mehreren Möglichkeiten. Beim Seiten aufruf soll er "Vorgegebene Passwörter" öffnen. Wenn ich jetzt die Kategorie "Kryptische Passwörter" wähle, soll die erste Kategorie geschlossen werden und die 3te Kategorie soll geöffnet werden.

<script type="text/javascript">
      function aufklappen(element){
         var status = document.getElementById(element).style.display;
         document.getElementById('pass1').style.display = 'none';
         document.getElementById('pass2').style.display = 'none';
         document.getElementById('pass3').style.display = 'none';
         if(status == "none"){document.getElementById(element).style.display = "block";}
      }
</script>

<style type="text/css">
.pwuber{
   background-color: #20B2AA;
}
.pwunter{
   background-color: #B9D3EE;
   display: none;
}
.pwunteroffen{
   background-color: #B9D3EE;
}
</style>

<table class="passwort">
   <tr>
      <td class="pwuber">
         <input type="radio" name="kategorie" value="1" onClick="aufklappen('pass1')" checked>
         Vorgegebene Passwörter
      <td>
   </tr>
   <tr id="pass1" class="pwunteroffen">
      <td>inhalt</td>
   </tr>
   <tr>
      <td class="pwuber">
         <input type="radio" name="kategorie" value="2" onClick="aufklappen('pass2')">  
         Lesbare Passwörter
      <td>
   </tr>
   <tr id="pass2" class="pwunter">
      <td>inhalt</td>
   </tr>
   <tr>
      <td class="pwuber">
         <input type="radio" name="kategorie" value="3" onClick="aufklappen('pass3')">  
         Kryptische Passwörter
      <td>
   </tr>
   <tr id="pass3" class="pwunter">
      <td>inhalt</td>
   </tr>
</table>

Ich hoffe mir kann einer Helfen. Schon einmal vielen vielen Dank für eure Hilfe

 

[Maik]

Moin,

erweiter mal die if-Abfrage mit einer else-Bedingung, und tausche in deiner if-Abfrage die beiden display-Werte.

      function aufklappen(element){
         var status = document.getElementById(element).style.display;
         document.getElementById('pass1').style.display = 'none';
         document.getElementById('pass2').style.display = 'none';
         document.getElementById('pass3').style.display = 'none';
         if(status == "block"){document.getElementById(element).style.display = "none";}
         else{document.getElementById(element).style.display = "block";}
      }

mfg Maik

 

[Mavericklp]

Vielen Dank!!
Funktioniert!!