Hallo. Ich hole den Beitrag mal aus der Versenkung. Habe das gerade umgesetzt.
Beim öffnen egal welchen Spoilers öffnet sich nur der erste Spoiler
Lösung;
Code: Alles auswählen
<div style="margin-bottom: 2px;">
<b>Spoiler! </b>
<input
value="Show"
style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;"
onclick="var c=this.parentNode.nextElementSibling.getElementsByTagName('div')[0]; if(c.style.display!='inline'){c.style.display='inline';this.value='Hide';}else{c.style.display='none';this.value='Show';}"
type="button">
</div>
<div style="border: 1px inset; padding: 6px;">
<div style="display: none;">{TEXT}</div>
</div>
Das Problem liegt im ursprünglichen onclick-Code, der den aufzuklappenden Inhalt über parentNode.parentNode.getElementsByTagName('div') sucht. Diese Methode navigiert zwei Ebenen nach oben und sucht dann alle <div>-Elemente unterhalb – und landet dabei immer beim ersten Spoiler der Seite, egal welcher Button geklickt wurde.
Lösung: Statt durch den gesamten übergeordneten Bereich zu suchen, navigiert der neue Code vom Button-<div> direkt zum nächsten Geschwisterelement (nextElementSibling). Da der Inhalts-<div> immer direkt nach dem Button-<div> steht, ist die Referenz damit eindeutig – jeder Button steuert nur seinen eigenen Spoiler.
Der entscheidende Teil im onclick:
var c = this.parentNode.nextElementSibling.getElementsByTagName('div')[0];
this → der geklickte Button
.parentNode → das umschließende Button-<div>
.nextElementSibling → das direkt folgende <div> (mit dem Border)
.getElementsByTagName('div')[0] → der darin enthaltene Inhalts-<div>
So funktioniert jeder Spoiler unabhängig voneinander, egal wie viele im selben Post stehen.