Div dynamisch ein-/ausblenden per CSS

[mcmulmann]

Hallo Forum,

den folgenden Code hab ich hier im Forum gefunden.
http://forum.de.selfhtml.org/archiv/2008/4/t170383/

Er soll das div"versteckt" beim Anklicken eines Wortes einblenden.
Leider bekomme ich das als JS-Neuling nicht zum laufen. Irgendwas haut da nicht hin...

Wenn ich die this-Übergabe weglasse und das div einfach per document.getElementById... anspreche, funktioniert es.

Ich habe in meinem Projekt unterschiedlich viele solcher Aufklapp-Texte auf einer Seite.

Frage 1: was funktioniert da nicht mit der Übergabe per this und parentNode

Frage 2: wie könnte man die Funktion umwandeln, ohne eine eindeutige ID zu verwenden, damit sie auf beliebig viele Texte anwendbar ist ?
(geht: parentNode -> div ? wie deklariert man das ?)

Vielen Dank für Eure Hilfe !
-Mathias-

  
<style type="text/css">  
  
  
#einblenden {  
  text-decoration: underline;  
}  
  
#versteckt {  
  display: none;  
}  
  
#ausblenden {  
  text-decoration: underline;  
}  
  
</style>  
<script type="text/javascript">  
function einblenden(el) {  
  el.parentNode.getElementById('versteckt').style.display = 'block';  
}  
  
function ausblenden(el) {  
  el.parentNode.getElementById('versteckt').style.display = 'none';  
}  
  
</script>  
<p>  

> ich möchte, dass beim Klicken auf das Wort "<span id="einblenden" onclick="einblenden(this);">weiterlesen</span>" sich ein weiterer Text öffnet, welcher zuvor nicht zu sehen ist. <div id="versteckt">Sofern der Leser sich entscheidet, die weitergehenden Informationen doch nicht lesen zu wollen, soll bei Klick auf das Wort "<span id="ausblenden" onclick="ausblenden(this);">zurück"</span> der zusätzliche Text wieder ausgeblendet werden.</div>  

</p>  

[Kalle_B]

Hallo,

Irgendwas haut da nicht hin...

Tja, solche Fehler kenne ich auch. Ich habe meine Kristallkugel und den Kaffeesatz gefragt. Leider keine Antwort.

Vielleicht liegt es an dem Zusammenspiel Javascript - HTML Tags

Kalle

[ChrisB]

Hi,

Irgendwas haut da nicht hin...

Das ist als Problembeschreibung reichlich unbrauchbar.
</hilfe/charta.htm#tipps-fuer-fragende>

Beispielweise solltest du in die Fehlerkonsole deines Browsers schauen, die duerfte sicher was melden.

Frage 1: was funktioniert da nicht mit der Übergabe per this und parentNode

Das funktioniert nicht, weil this.parentNode nicht das document ist, und nur das besitzt die Methode getElementById.

Frage 2: wie könnte man die Funktion umwandeln, ohne eine eindeutige ID zu verwenden, damit sie auf beliebig viele Texte anwendbar ist ?

Der Div ist vom ersten Span, ueber dessen onclick er eingebunden werden soll, reichlich unabhaengig - da kaemst du hoechstens ueber die nextSiblings des Spans o.ae. ran; allerdings damit reichlich unflexibel gegenueber Aenderung der Dokumentstruktur.

Vom zweiten Span aus allerdings, der sich ja im Div befindet, kaemst du natuerlich bequem ueber parentNode zum Div.

MfG ChrisB

[KrisK]

<script type="text/javascript">
function einblenden(el) {
  el.parentNode.getElementById('versteckt').style.display = 'block';
}

function ausblenden(el) {
  el.parentNode.getElementById('versteckt').style.display = 'none';
}

</script>
<p>
»» ich möchte, dass beim Klicken auf das Wort "<span id="einblenden" onclick="einblenden(this);">weiterlesen</span>" sich ein weiterer Text öffnet, welcher zuvor nicht zu sehen ist. <div id="versteckt">Sofern der Leser sich entscheidet, die weitergehenden Informationen doch nicht lesen zu wollen, soll bei Klick auf das Wort "<span id="ausblenden" onclick="ausblenden(this);">zurück"</span> der zusätzliche Text wieder ausgeblendet werden.</div>
</p>

versuch mal:

<style>
.versteckt{display:none;}
</style>

<script>
function einblenden(el){
//alert(el.parentNode.childNodes.length);
el.parentNode.childNodes[el.parentNode.childNodes.length-2].style.display="block";
}
function ausblenden(el){
el.parentNode.style.display="none";
}
</script>

<div>
text<br />
<a href="#" onclick="einblenden(this);">weiterlesen</a>
<br />
<div class="versteckt">
versteckter text<br />
<a href="#" onclick="ausblenden(this);">zurück</a>
</div>
</div>

die node-nummerierung schließt schließende container und zeilenumbrüche glaube ich mit ein, deshalb die -2...
aber funktioniert erstmal

[mcmulmann]

Schönen Dank für die Hilfe.

Mit dem Code von KrisK komm ich gut hin (!!! Danke !!!), auch wenn ich zugeben muß, daß ich die Zuordnung
el.parentNode.childNodes[el.parentNode.childNodes.length-2]
noch nicht so ganz durchschaut habe.
Vielleicht kannst Du sie mir Ahnungslosem noch mal erläutern.

Hab das Skript noch erweitert, sodaß beim Anzeigen eines span alle anderen vorher geschlossen werden.
Genau so brauchte ich das.
Danke für die Hilfe !!!

<style>  
.versteckt{display:none;}  
</style>  
  
<script>  
function einblenden(el){  
  for (var i = 0; i < document.getElementsByTagName("span").length; i++) {  
    document.getElementsByTagName("span")[i].style.display = "none";  
  }  
el.parentNode.childNodes[el.parentNode.childNodes.length-2].style.display="block";  
}  
function ausblenden(el){  
el.parentNode.style.display="none";  
}  
</script>  
  
<div>  
text<br />  
<a href="#" onclick="einblenden(this);">weiterlesen</a>  
<br />  
<span class="versteckt">  
versteckter text<br />  
<a href="#" onclick="ausblenden(this);">zurück</a>  
</span>  
</div>  
  <br /><br />  
<div>  
text2<br />  
<a href="#" onclick="einblenden(this);">weiterlesen2</a>  
<br />  
<span class="versteckt">  
versteckter text2<br />  
<a href="#" onclick="ausblenden(this);">zurück2</a>  
</span>  
</div>

den Hinweis mit der Fehlerkonsole werde ich beherzigen, im Moment kann ich mit den Fehlermeldungen allerdings noch nicht viel anfangen...

zum Thema Kaffeesatz: der war auch bei mir nicht sehr gesprächig, weshalb ich mich ans Forum gewendet habe ;)