Alle Kategorien
Suche

In HTML einen Spoiler erstellen - so geht's

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.

Spoiler-Effekt mit HTML, CSS und jQuery.
Spoiler-Effekt mit HTML, CSS und jQuery.

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.
Teilen: