infotexte ein/ausblenden

[dobra]

Hallo,

Ich habe eine Vergleichstabelle mit ca 30 Punkten.
Bei klick auf die einzelnen Punkte soll

1. ein Infotext eingeblendet werden
2. das Image von "+" auf "-" wechseln

mein Versuch:

<script type="text/javascript">
function swap(targetID) { obj = document.getElementById(targetID);
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none'; }

function a() {
 document.images.img1.src="../Navi/minus.gif";
 document.getElementById("pmID").href = "javascript:b();";
}

function b() {
 document.images.img1.src="../Navi/plus.gif";
 document.getElementById("pmID").href = "javascript:a();";
}

function a2() {
 document.images.img2.src="../Navi/minus.gif";
 document.getElementById("pmID2").href = "javascript:b2();";
}

function b2() {
 document.images.img2.src="../Navi/plus.gif";
 document.getElementById("pmID2").href = "javascript:a2();";
}
...
...
</script>

...
<tr>
<td><a href="javascript:a();" id="pmID" style="text-decoration: none;" onClick="swap('e1');"><img name="img1" style="border:none; width: 9px;" src="../Navi/plus.gif" alt="einblenden"> mtl. Transfervolumen</a></td>
...
</tr>
<tr><td colspan="6">
<div id="e1" style="border: 1px dotted black; display:none;">
<p>
Infotext 1
</p>
</div>
</td></tr>
<tr>
<td><a href="javascript:a2();" id="pmID2" style="text-decoration: none;" onClick="swap('e2')"><img name="img2" style="border:none; width: 9px;" src="../Navi/plus.gif" alt="einblenden"> E-Mail Adressen</a></td>
...
</tr>
<tr><td colspan="6">
<div id="e2" style="border: 1px dotted black; display:none;">
<p >
Infotext 2
</p>
</div>
</td></tr>
...

soweit funktioniert das.
Aber ich kriegs's nicht hin, dass bei klick auf einen Link der zuvor eingeblendete Infotext wieder ausgeblendet wird

und meine Lösung mit dem +/- Image ist ja auch "Pfusch"  :(
bei ca 30 Infotexten gibt es doch bestimmt eine elegantere Lösung, als für jeden Punkt eine eigene Funktion zu schreiben....

Kann mir bitte jemand helfen?

Vielen Dank schon mal im Voraus
dobra

[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

[dobra]

Hallo LX,

Danke für den Lösungsansatz!

... aber ich bin zu doof - ich krieg's nicht hin :'(

für den Infotext und die "-" Grafik habe ich mal eine Klasse .showno {display: none;} und für die "+" Grafik .showyes {display: inline;} angelegt

aber *was* muss ich in die Klasse "infoTextEnabled" schreiben damit der Infotext ein/ausgeblendet wird?

und welche Bedeutung hat das "test" in Deinem Code?
.test(parent.className)

sorry wenn ich dumm frage, aber ich möchte - wenn möglich - nicht "nur" einen ferigen Code der funktioniert, sondern das auch verstehen und lernen, um es beim nächsten mal selber bauen zu können.

lg
dobra

[LX]

Hallo, dobra!

Du hast den Lösungsansatz vom CSS her offenbar noch nicht ganz verstanden - die zusätzliche Klasse dient dabei im CSS als Unterscheidungsmerkmal:

...  
.infoText { display: none; }  
.infoTextEnabled .showyes { display: none; }  
.infoTextEnabled .showno { display: inline; }  
.infoTextEnabled .infoText { display: block; }

Und was Deine Frage zu http://de.selfhtml.org/javascript/objekte/regexp.htm#test@title=.test betrifft, das ist nur eine RegExp-Methode, die feststellt, ob eine RegExp zutrifft oder nicht und true oder false zurückgibt.

Gruß, LX

[dobra]

Hallo nochmal,

Du hast den Lösungsansatz vom CSS her offenbar noch nicht ganz verstanden - die zusätzliche Klasse dient dabei im CSS als Unterscheidungsmerkmal:

ich fürchte, ich habe *garnix* begriffen...
ich krieg's einfach nicht hin :(

dobra