Alle Kategorien
Suche

In HTML einen Spoiler erstellen - so geht's

Spoiler-Effekt mit HTML, CSS und jQuery.
Spoiler-Effekt mit HTML, CSS und jQuery.
Wenn Sie in HTML einen Spoiler erzeugen möchten, können Sie dies schnell und einfach mit ein paar Zeilen CSS-Code und jQuery machen. CSS dient dabei der grafischen Gestaltung und jQuery ist als JavaScript-Erweiterung für die Klick-Effekte verantwortlich. Wie dies alles funktioniert, erfahren Sie hier.

Ein HTML-Grundgerüst erstellen

Bevor Sie den Spoiler animieren lassen, müssen Sie sich zunächst um das HTML-Grundgerüst kümmern.

  • Grundsätzlich brauchen Sie für einen Spoiler Effekt drei Komponenten: Einen Text zum Anklicken und somit zum Anzeigen des Spoiler-Textes, einen Text zum Anklicken und Ausblenden sowie den eigentlichen Spoiler-Text.
  • Der Text zum Anzeigen könnte zum Beispiel "Zeige Spoiler" und der zum Ausblenden "Verstecke Spoiler" heißen.
  • Um für beide Klick-Texte dieselbe Funktion (Ein-/Ausblenden) zu nutzen, legen Sie für beide einen "a"-Tag als Rahmen fest, also einen Link, und geben diesem einen leeren Wert ("#"), da über diesen Link ja keine neue Seite geöffnet werden soll.
  • Damit Sie diesem Link auch eine Klick-Aktion zuweisen können, müssen Sie dem a-Tag zuletzt eine ID zuweisen.
  • Der vollständige Code könnte dann zum Beispiel so aussehen:
  • Dazwischen schreiben Sie jetzt die beiden Texte zum Anklicken und weisen diesen einen span-Tag mit einer Klasse zu, um diese später mit CSS gestalten zu können.
  • Die vollständige Klickfunktion würde dann so aussehen:
    class='link'>Zeige Spoilerclass='link' >Verstecke Spoiler
  • Zuletzt müssen Sie noch ein Div-Element erzeugen, in welchem Sie den Spoiler-Text zunächst ausgeblendet lassen und per Klick einblenden lassen. Dies könnte zum Beispiel wie folgt sein:
    das ist der versteckte Text

Grafische Gestaltung mit CSS

Sobald Sie das HTML-Grundgerüst erstellt haben, können Sie sich mithilfe von CSS um die grafische Umsetzung kümmern, also vor allem den Spoiler-Text und den Link zum Ausblenden zunächst verstecken.

  • Dazu müssen Sie zunächst im Head-Bereich Ihrer HTML-Datei einen CSS-Definitionsbereich erstellen. Geben Sie dazu einfach die folgenden beiden Zeilen ein:
  • Nun können Sie die einzelnen Elemente zwischen den beiden Zeilen definieren. Um den Spoiler-Text zunächst zu verstecken, müssen Sie Folgendes schreiben:
    #spoiler
    {
    display: none;
  • Display ("Anzeige") definiert die Anzeige-Option für das Element und "none" ("keine") legt fest, dass das Element versteckt ist.
  • Das Gleiche können Sie nun für den Text "Verstecke Spoiler" anwenden, indem Sie im Span-Tag "style='display: none;'" hinzufügen, sodass die vollständige Zeile so aussehen würde:
    Verstecke Spoiler
  • Optional könnten Sie die Elemente weiter gestalten, indem Sie zum Beispiel die Farbe der beiden Links in blau ändern:
     .link
    {
    color: blue;

Spoiler-Effekt mit jQuery erstellen

Sobald Sie das HTML-Grundgerüst erstellt und die beiden versteckten Elemente mit CSS erzeugt haben, können Sie nun mit jQuery den Spoiler-Effekt erzeugen. 

  • Dazu benötigen Sie zunächst die aktuelle jQuery-Library, um auf die einzelnen Funktionen zurückgreifen zu können. Fügen Sie dazu einfach in den Head-Bereich die folgende Zeile ein:
  • Als Nächstes definieren Sie einen Script-Code im Head-Bereich, indem Sie schreiben:
  • Dazwischen erstellen Sie nun den Code für den Spoiler-Effekt. Dieser sieht wie folgt aus: 
    $(document).ready(function()
      {
      $('a#expand').click(function()
         {
         $('div#spoiler').toggle();
         $('span.link').toggle();
         });
      });
  • Die erste Zeile bedeutet, dass die Funktion beim Start Ihrer HTML-Seite geladen wird und somit bereit ist.
  • Danach weisen Sie Ihrem Link ("a") mit der ID "expand" ("#expand") eine Klick-Funktion zu ("click(function()").
  • Die restlichen beiden Zeilen definieren die Aktionen, die passieren sollen, wenn auf den Link geklickt wird, also entweder auf "Zeige Spoiler" oder "Verstecke Spoiler".
  • Der Text ".toggle()" bedeuetet dabei, dass das Element abwechseln angezeigt oder ausgeblendet wird, je nachdem, was gerade aktiviert ist.
  • Da das Div-Elemt "spoiler" zunächst versteckt ist, wird dieses angezeigt, also der Spoiler-Text erscheint.
  • Beim Span-Element "link" passieren dann zwei Aktionen: Zum einen wird der angezeigte Text ("Zeige Spoiler") versteckt und zum anderen der ausgeblendete Text ("Verstecke Spoiler") nun angezeigt.
  • Wenn Sie danach erneut auf einen Link klicken, würde genau das Gegenteil passieren: Der Spoiler-Text verschwindet, "Zeige Spoiler" erscheint wieder und "Versteckt Spoiler" verschwindet.
  • Der vollständige Code wäre somit für Ihren Head-Bereich: 
  • Sowie für Ihren Body-Bereich:
    class='link'>Zeige Spoilerclass='link' >Verstecke Spoiler
    Das ist der versteckte Text.
helpster.de Autor:in
Kevin Höbig
Kevin HöbigKevin ist ein alter Hase bei HELPSTER. Als Webdesigner und Mediengestalter, der auch auf journalistische Erfahrung zurückblicken kann, beschäftigt er sich nicht nur privat mit technischen Themen. Dank seines Wissens hilft er anderen oft mit praktischen Tipps weiter.
Teilen: