In HTML einen Spoiler erstellen - so geht's

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.