infotexte ein/ausblenden

[LX]

Hallo, dobra!

Dein Code treibt mir Tränen in die Augen; Du versuchst, mit JS Stilangaben umzusetzen: dafür haben wir CSS. Mache folgendes:

Du schreibst den Infotext und beide Grafiken direkt in die Tabelle. Nun gestaltest Du das CSS so, dass der Infotext und die "-"-Grafik standardmäßig mit display:none; ausgeblendet werden (verwende entsprechende Klassen).

Als nächstes erstellst Du eine Klasse "infoTextEnabled" für die Tabellenzeile, die, wenn sie gesetzt ist, bewirkt, dass die "-"-Grafik und der Infotext ein- sowie die "+"-Grafik ausgeblendet wird.

Jetzt brauchst Du nur noch ein Script, welches bei dem darüberliegenden TR-Element die entsprechende Klasse setzt und welches ungefähr so aussieht:

function toggleInfoText(link) {  
   var parent = link;  
   while (parent && parent.nodeName.toLowerCase() != 'tr') { parent = parent.parentNode; }  
   if (/\binfoTextEnabled\b/.test(parent.className)) {  
      parent.className = parent.className.replace(/\binfoTextEnabled\b/g, ' ');  
   } else {  
      parent.className += ' infoTextEnabled';  
   }  
   return false;  
}

Diese Funktion rufst Du im onclick-Handler des Links mit onclick="return toggleInfoText(this);" auf.

Wenn Du ganz kreativ bist, kannst Du auch noch die Grafiken als background-Images verwenden, aber das überlasse ich Dir.

Gruß, LX