Spoiler

[Niklas33]

Moin Leute,
ich bin leider noch Anfänger -.- und hätte mal ne frage zu einem Spoiler.
Undzwar habe ich das wie folgt gemacht:
<button onclick="document.all.spoiler.style.display=''">Film Info</button><div id="spoiler" style="display:none;"><span style="color:#696969"> <font size=3>text </font size=3> </span style="color:#696969"></div>
Ein Spoiler geht auch, aber wenn ich einen 2. einsetze gehen beide nicht mehr.
Wenn ich display auf Block stelle ist es immer da, also wo liegt der Fehler?
Vielen Dank im Voraus
LG Niklas333

 

[threadi]

Hast Du für den zweiten den identischen Code benutzt? Dann ist die Problemursache, dass Du den JavaScript-Code nicht angepasst hast. In diesem wird auf die ID "spoiler" zugegriffen. Pro Spoiler müsstest Du diesen JavaScript-Code sowie die ID jeweils anpassen.

Beispiel:

<button onclick="document.all.spoiler.style.display=''">Film  Info</button><div id="spoiler"         style="display:none;"><span style="color:#696969"> <font  size=3>text </font size=3> </span  style="color:#696969"></div>

<button onclick="document.all.spoiler2.style.display=''">Film  Info</button><div id="spoiler2"         style="display:none;"><span style="color:#696969"> <font  size=3>text </font size=3> </span  style="color:#696969"></div>

Hinweis: Bitte verwende Code-Tags wenn Du Quellcode im Forum postest.

Moderation: Verschoben von HTML zu JavaScript.

 

[Niklas33]

Danke ! (Hand vor den Kopf hau )
Ja, ich bin ganz neu hier, bitte nicht meckern :)

 

[Niklas33]

Also wenn ich jetzt den einen unteren öffne , öffnet sich der obere -.-
hab jetzt ein mal id=spoiler und eimal id=spoiler2 ( sorry hab keine Ahnung wie ich Codes, als Feld mache deswegen so ;) )
Was ist jetzt falsch ?
Sorry bin halt anfänger

 

[threadi]

Hast Du auch das im onclick-Attribut entsprechend angepasst? Genau hingucken.

 

[Niklas33]

Wie muss ich das verändern ?

 

[threadi]

Schau mal genau hin:

<button onclick="document.all.spoiler.style.display=''">[..]
<button onclick="document.all.spoiler2.style.display=''">[..]

 

[janm]

Für javascript empfehle ich den einsatz von jQuery wegen totaler Browserkompatibilität.
Lade dir bevor du den Quelltext unten einbaust, auf jeden Fall die Compressed Version von jQuery, siehe jQuery: The Write Less, Do More, JavaScript Library und binde die Javascript-Datei ganz normal in deine HTML-Datei ein.
dann kannst du dir eine javascript-funktion schreiben:

funktion toggleSpoiler(s){ // s=spoilerId
    id="#spoiler"+s;
    if($(id).css("display")=="none"){
        $(id).fadeIn();
    }
    else if($(id).css("display")=="block"){
        $(id).fadeOut();
    }
}

Spoiler-Code: ACHTE GANZ GENAU AUF DIE ZAHL!!!

<button onclick="toggleSpoiler(1)">Spoiler</button>
<div class="spoiler" id="spoiler1">Spoilertext Spoilertext Spoilertext</div>
Text Gext Text
<button onclick="toggleSpoiler(2)">Spoiler</button>
<div class="spoiler" id="spoiler2">Spoilertext Spoilertext Spoilertext</div>
Noch mehr Text Text Text
<button onclick="toggleSpoiler(3)">Spoiler</button>
<div class="spoiler" id="spoiler3">Spoilertext Spoilertext Spoilertext</div>

CSS-Code:

.spoiler{
    display:hidden; /* Wichtig! */
    /* andere optionale Styleangaben für Spoiler */
}