-» Clues of DUG
-» DUG Partner
-» Stream Panel
Tote Hose? Wie ihr sicher schon bemerkt habt, ist auf DUG-Portal in letzter Zeit wenig los. Da ich mein Hobby (Webentwicklung ect.) zum Beruf gemacht habe, habe ich für den Blog nur noch wenig Zeit bzw. keine Lust in meiner Freizeit auch noch vorm PC zu vergammeln. Daher gibt es nur noch selten etwas neues. Dennoch werde ich versuchen, hier und da etwas zu schreiben. Man wird sehen was die Zeit bringt...

Einfacher Javascript Spoiler

Hier ein sehr einfaches Beispiel für einen Spoiler mit Javascript. Für die Function wird lediglich dieser kleine Schnipsel benötigt, welcher in den Head Tag eurer Seite eingefügt werden muss..

<script type="text/javascript">
function spoil(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = (divid.style.display=='block'?'none':'block');
} }
</script>

Der Spoiler sieht dann so aus..
<span style="cursor:pointer;" onclick="spoil('id1');">Spoiler Titel</span>

<div id="id1" style="display:none;">
Hier der versteckte Text!
</div>

Die Function kann natürlich auch auf mehrere Elemente angewendet werden. Nur die ID, im Beispiel oben id1, muss dann immer unterschiedlich sein.

Tags: javascript spoiler, javascript aufklappmenü, js spoiler script, einfacher javascript spoiler

7 Kommentare:

  1. Hey vielen Dank sowas habe ich gesucht.Würde mich über mehr solcher sachen freuen.

    ECHT NICE

    AntwortenLöschen
  2. also bei mir klappts net es steht nur der spoiler titel kommen tut nichts

    AntwortenLöschen
  3. Tja dann machst du eben etwas falsch. Oder evt. wird bei dir aus irgendwelchen gründen, (durch Addons im Browser ect.) Javascript deaktiviert.

    Das Script an sich funktioniert problemlos.

    AntwortenLöschen
  4. THX für das sehr Gute Tutorial :=) Das ist das einzige was bei mir funktioniert

    AntwortenLöschen
  5. Hey, vielleicht kann mir jemand helfen, ich hab das obere in eine seperate Datei gepackt und das untere ganz fein und brav in den Quelltext der Seite geschrieben.

    Naja schön und gut,

    es funktioniert irgendwie nicht... Was mach ich denn falsch?? ):

    AntwortenLöschen
  6. Hast du vlt. auch die Script-Tags in die JS-Datei eingefügt?

    AntwortenLöschen