HTML Spoiler

MCStreetguy

Stammuser
Hallo Leute

Ich wollte auf meiner Homepage einen Spoiler einbauen ähnlich denen hier aus den Foren... Nen Code dazu hab ich auch schon gefunden:
HTML:
<div class="pre-spoiler"> <input name="button" type="button" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Zuklappen'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Aufklappen';}" value="Buttontext"> </div>         <div class="spoiler" style="display: none;">Der Text, der sichtbar gemacht wird</span>         </div>
Nun will ich das aber ohne Button realisieren sondern den Inhalt bei Klick auf ein Bild anzeigen lassen...
Wie geht das?

Danke schonmal, MCStreetguy


PS: Hab mich nie mit Javascript und dergleichen auseinandergesetzt deshalb meine Unkenntnis...
 

DerW

Stammuser
Der Code, den du gefunden hast, hat ein kleines Problem: Er erwartet, dass dein Spoiler an einer bestimmten Stelle im Dokument zu finden ist. Außerdem wird ein Span geschlossen, der nie geöffnet wurde.

Ich würde daher den ganzen Code ein wenig anpassen und etwa so umschreiben:
HTML:
<div class="pre-spoiler">
    <img src="[b]PFAD_ZUM_BILD[/b]" alt="[b]ALTERNATIVTEXT[/b]" onClick="spoilMe(this)">
</div>
<div class="spoiler" style="display: none;">
    Der Text, der sichtbar gemacht wird
</div>

<script>
function spoilMe(element) {
  var spoiler = element.parentNode.nextElementSibling;
  if (spoiler.style.display === 'block') {
    spoiler.style.display = 'none';
  } else {
    spoiler.style.display = 'block';
  }
}
</script>

Diese Variante ruft die Funktion spoilMe mit dem angeklickten Element als Parameter auf, speichert anschließend das nachfolgende Element in einer Variable (der Spoiler-Text muss also direkt nach dem Bild angebracht sein, die absolute Position ist dagegen egal) und prüft anschließend, ob die Anzeige des Elements eingestellt ist. Wenn nicht, wird sie eingestellt, ansonsten ausgestellt. Das könnte man auch noch etwas kürzer und eleganter schreiben, aber so ist es denke ich noch am ehesten verständlich :).
 
Zuletzt bearbeitet:

overflow

Member of Honour
Bitte beachte folgendes: Bei diesen Varianten "versteckst" du den gewünschten Text nicht. Mit einigen Handgriffen sieht man den Text.
 
Oben