Verteckter Text Mit JavaScript.

[Ranmaru]

Hallo,

ich suche nach einer Möglichkeit, in einem Forum eine Art Spoilerfunktion einzubauen, welche es ermöglicht, einen Text einzugeben, welcher aber durch einen Ersatztext dargestellt wird und sich erst beim anklicken desselben vollständig zeigt.
Also könnte man etwa das Wort "Spoiler" schreiben, beim Klick auf das Wort würde sich dann die zuvor versteckte Zeile zu erkennen geben.

Dazu benutze ich generell folgendes Script.

Code:

<script language="JavaScript" type="text/javascript">
<!--
	function spoiler(id)
	{
		var obj = "";	

		if(document.getElementById)
			obj = document.getElementById(id).style;
		else if(document.all)
			obj = document.all[id];
		else if(document.layers)
			obj = document.layers[id];
		else
			return 1;
			
		if(obj.display == "")
			obj.display = "none";
		else if(obj.display != "none")
			obj.display = "none";
		else
			obj.display = "block";
	}
//-->
</script>

Als Link kommt dann folgendes.

Code:

<div class="spoilerhidden" onClick="spoiler(foo)" style="font-weight: bold">
Spoiler - Hier klicken zum Anzeigen!
</div>
<div class="spoilerfull" id="foo" style="display:none">
Hallo, ich bin ein Spoiler!
</div>

Das funktioniert auch wunderbar, aber nur statisch. Will ich das ganze jetzt in ein Forum integrieren, brauch ich die Möglichkeit, die ID, also das, was im Beispiel foo ist, dynamisch zu vergeben, damit sich beim Klick auch der richtige Spoiler öffnet.
Die Frage ist, wie ich das machen kann.

Danke im Vorraus,
Ranmaru.

[Manni]

Mach es doch so:

PHP-Code:

$id=md5(uniqid(rand())); 

(Ich denke mal bei einem Forum hast du PHP Unterstützung... )
Damit bekommst du eine ziemlich eindeutige ID. Die Wahrscheinlichkeit, dass diese ID sich wiederholt, ist unendlich gering. Deswegen wird sie ja auch zB für Sessions benutzt

Manni

[Ranmaru]

Das Problem ist ja, es geht eben kein PHP.
Also das Forum läuft natürlich auf PHP-Basis (es ist ein WBB), allerdings kann man es nicht beim Erstellen neuer Tags verwenden. Dazu muß man nämlich einen Parameter bestimmen, in diesem Fall [spoiler] und sagen, welchen HTML-Code dieser repräsentiert. Wenn man PHP eingibt, wird der Code einfach nur als Text interpretiert, das habe ich schon versucht.

[Manni]

Dann wäre das mein Vorschlag (Bei mir hat es funktioniert):

HTML-Code:

<script language="JavaScript" type="text/javascript">
<!--
id++;
document.write("<div class=\"spoilerhidden\" onClick=\"spoiler('spoiler"+id+"')\" style=\"font-weight: bold;\">Spoiler - Hier klicken zum Anzeigen!</div><div class=\"spoilerfull\" id=\"spoiler"+id+"\" style=\"display: none;\">Hallo, ich bin ein Spoiler!</div>");
//-->
</script>

Du musst nur noch bei dem oberen Script (dem mit der Funktion) folgende Zeile hinzufügen:

HTML-Code:

var id = 1;

BTW würde mich mal interessieren, warum du das nicht so machst wie hier im Forum mit dem Hintergrund, der die selbe Farbe wie die Schrift hat? Denn das ist einfacher und nicht jeder Internetnutzer hat JS angeschaltet

[Ranmaru]

Hat nicht funktioniert, allerdings hab ich mittlerweile eine Alternative gefunden und es über einen Button gemacht. Das klappt wunderbar. Trotzdem bedanke ich mich für den Versuch.

[...]
BTW würde mich mal interessieren, warum du das nicht so machst wie hier im Forum mit dem Hintergrund, der die selbe Farbe wie die Schrift hat? Denn das ist einfacher und nicht jeder Internetnutzer hat JS angeschaltet

...

Liegt in erster Linie daran, daß so eine Spoilerbox häßlich ist und mir das Textmarkieren tierisch auf die Eier geht. Außerdem kann man in so einer Box keine Bilder verstecken, mit meiner Variante schon.