Spoiler: Suche Lösung

[pasib22]

Hallo zusammen!

Ich hab' mir grad für mein phpBB-Forum einen Spoiler gebastelt. Jedoch bin ich dann auf ein Problem gestoßen, wenn mehr wie zwei Spoiler drinnen sind, bekomme ich Probleme.


Code:

Code: Alles auswählen

<!-- Hier wird das Script eingebunden -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<!-- Button zum Spoiler zeigen -->
<button onClick="$('#spoiler').show(500);">{TEXT2}</button>
<!-- Spoiler selber -->
<div id="spoiler" style="width: auto; height: auto; background: transparent; overflow: hidden; display: none; padding: 10px;">		
	{TEXT}
	<!-- Button zum Verstecken des Spilers -->
	<br /><br /><button onClick="$('#spoiler').hide(500);">Verstecken</button>
</div>

Wenn ich zwei Spoiler drinnen habe, öffnen sich beide, was ja logisch ist weil beide DIV's dann die gleiche ID haben.
Habt ihr eine Lösung, welche ich machen könnte, ich hätte zwar schon folgene:

Die User geben bei einem Spiler den Buttoninhalt, den Inhalt des DIV's und die ID des DIV's an, welcher geöffnet werden soll.

Lösung, aber vielleicht gibts es noch was anderes, für die User einfacheres.


Gruß Pascal

[hackepeter13]

Hallo Pascal,

ich gehe jetzt mal davon aus, das du ein Spoiler BBCode benötigst, dazu will ich dir schlicht und einfach den Code aus der BBCodeBox3 anbieten.

BB-Benutzung:

Code: Alles auswählen

[spoil]{TEXT}[/spoil]

HTML-Ersetzung:

Code: Alles auswählen

<div style="text-align:left"><div class="spoiltitle">SPOILER: 
<input class="spoilbtn" type="button" value="{L_BBCODE_SPOILER_VIEW}" onclick="javascript: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 = '{L_BBCODE_SPOILER_HIDE}'; this.value = '{L_BBCODE_SPOILER_HIDE}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '{L_BBCODE_SPOILER_VIEW}'; this.value = '{L_BBCODE_SPOILER_VIEW}'; }" onfocus="this.blur();" />
<div class="spoildiv">
<div style="display: none; border-top:1px #000 solid;">{TEXT}</div></div></div></div>

Damit kannst du dir zig Spoiler in einem Beitrag erstellen, ohne das sie sich gegenseitig stören und du sparst die die zusätzliche qjuery.js

Und falls du es noch optisch aufpeppen willst, dann füge das in die common.css

Code: Alles auswählen

.spoiltitle {
font-family: verdana, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #fcfcfc;
border: 1px #000 solid;
padding: 3px;
margin: 3px 10px;
}

.spoildiv {
font-family: verdana, sans-serif;
font-size: 11px;
font-weight: normal;
}

.spoilbtn {
font-family: verdana, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
margin: 2px 0px;
}

(Anschließend, gegebenfalls Forum-Chache leeren)