16.05.2016: Es gibt ein paar Aktualisierungen auf unserem Blog! Die Underground Suchmaschine mit welcher ihr Seiten wie die Boerse oder Mygully durchsuchen könnt, wurde komplett überarbeitet. Die XXX Stream Liste wurde aktualisiert, tote Links mit neuen ersetzt, das gleiche gilt für die MP3 Suchmaschinen und die Liste mit den Android Apps wurde ebenfalls erweitert.

Einfacher Javascript Spoiler

Hier ein sehr einfaches Beispiel für einen Spoiler mit Javascript. Für die Funktion wird nur dieser kleine Schnipsel benötigt, welcher in den Head Tag eurer Seite eingebaut 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 Funktion kann natürlich auch auf mehrere Elemente angewendet werden. Nur die ID, im Beispiel oben id1, muss immer unterschiedlich sein.

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

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
  7. Hallo, danke für das Script es worked traumhaft. Allerdings würde ich es jetzt gerne advanced einsetzen...sprich... eine verschachtelte Liste(Hmtl) in einen spoiler einbauen.

    Das Problem: Die Liste wird nicht verschachtelt sondern bündig angezeigt, kann das sein, dass dein Wert "block" daran Schuld hat? Muss man "block" in JS wegen einem automatischen Zeilenumbruch beibehalten?? Eine Idee wie das mit der Liste klappen könnte? :)

    Wäre grandios, mfG ein CSS-Jünger

    AntwortenLöschen
  8. Ich verstehe nicht so ganz was du meinst. Kannst du evt. mal einen Beispielcode auf www.pastebin.com hochladen?

    Ps: Der Wert "block" wird nur auf das DIV-Element angewendet um den Spoiler zu öffnen.

    AntwortenLöschen
  9. Hallo zusammen,

    ich habe den code erfolgreich integrieren können.
    Im zweiten Ansatz möchte ich nun ganze Tabellenzeilen samt dem Text aus- bzw. einblenden.
    Dies scheine ich falsch zu machen, was könnte ich falsch machen?

    AntwortenLöschen
  10. Super danke. Genau das was ich gesucht habe.

    AntwortenLöschen

ACHTUNG: Anonyme Kommentare werden nicht freigeschaltet! Bitte wählt aus der Dropdown-Liste "Name/URL" anstatt "Anonym". Mit "Name/URL" bleibt ihr ebenfalls anonym, jedoch kann so zwischen User A und User B unterschieden werden.

Gültige HTML-Tags: <a href="LINK">LINK TITEL</a> | <b>BOLD</b> | <i>KURSIV</i>