Wie man einen Spoiler einfach und schnell macht: 6 einfache Schritte

Der nächste Schritt besteht darin, dem Spoiler mit CSS einen Stil hinzuzufügen. Das Schlüsselattribut ist hier - display: none;. Damit können Sie den Informationscontainer ausblenden, bis der Spoiler aktiviert ist. Sie können den ID-Selektor verwenden, um den Stil auf den gewünschten Container anzuwenden. Zum Beispiel:

Es ist Zeit, den Spoiler mit JavaScript zu beleben. Sie können das 'click'-Ereignis verwenden, um versteckte Informationen anzuzeigen, wenn Sie den Spoiler aktivieren. Fügen Sie dazu den folgenden Code hinzu:

var spoiler = document.getElementById('spoiler');

Jetzt ist Ihr Spoiler fertig! Wenn Sie auf den Text "Klicken, um den Spoiler aufzudecken" klicken oder darauf zeigen, werden versteckte Informationen angezeigt. Sie können Stile für den Knopf und den Spoiler hinzufügen, um ihr Aussehen an Ihre Bedürfnisse anzupassen.

Schritt 1: Erstellen Sie einen Spoiler-Container

Sie können ein Tag zum Erstellen eines Containers verwenden, indem Sie ihm mithilfe des id-Attributs eine eindeutige ID zuweisen. Zum Beispiel:

Neben dem Erstellen eines Containers müssen Sie auch den Anfangszustand des Spoilers festlegen, indem Sie ihm den Stil display: none; zuweisen, um den Standardinhalt auszublenden. Zum Beispiel:

#spoiler-container

Danach können Sie mit dem nächsten Schritt fortfahren, um eine Schaltfläche oder einen Link hinzuzufügen, auf den der Benutzer klicken wird, um den Spoiler ein- oder auszublenden.

Schritt 2: Fügen Sie einen Knopf hinzu, um den Spoiler zu öffnen und zu schließen

Als nächstes müssen wir einen Knopf hinzufügen, der die Funktion zum Öffnen und Schließen des Spoilers erfüllt. Dazu verwenden wir ein Element.

Fügen Sie eine Schaltfläche nach dem Spoilertitel hinzu und legen Sie die Attribute id und onclick fest. Das id-Attribut ermöglicht es uns, eine Schaltfläche mit dem entsprechenden Spoiler zu verknüpfen, und das onclick-Attribut definiert das Skript, das ausgeführt wird, wenn auf die Schaltfläche geklickt wird.

Hier ist ein Beispielcode:

In diesem Beispiel haben wir das Attribut id="spoiler-btn" für die Schaltfläche festgelegt und angegeben, dass die Funktion toggleSpoiler() ausgeführt werden soll, wenn auf die Schaltfläche geklickt wird. Die Funktion toggleSpoiler() wird im nächsten Schritt definiert.

Schritt 3: Den Inhalt des Standardspoilers ausblenden

Um einen Spoiler auf Ihrer Webseite zu erstellen, müssen Sie zuerst den Spoiler-Inhalt ausblenden, damit er standardmäßig nicht angezeigt wird. Auf diese Weise können Besucher Ihrer Website selbst entscheiden, ob sie den vollständigen Inhalt sehen möchten oder nicht.

Um dies zu tun, können Sie die CSS-Eigenschaft display mit dem Wert none verwenden, um den Inhalt des Spoilers auszublenden. Sie können beispielsweise die Klasse "spoiler-content" für ein Element festlegen, das Spoiler-Text enthält, und den folgenden CSS-Code anwenden:

.spoiler-content

Wenn Sie nun diesen CSS-Code auf das Element anwenden, wird der Inhalt des Spoilers standardmäßig ausgeblendet.

Schritt 4: Schreiben Sie ein Skript zum Öffnen und Schließen des Spoilers

Damit der Spoiler per Klick geöffnet und geschlossen wird, müssen wir JavaScript verwenden. Hier ist ein Beispielcode:

• Erstellen Sie eine Funktion, die aufgerufen wird, wenn Sie auf ein Spoilerelement klicken.
• Überprüfen Sie in der Funktion, ob der Spoiler-Inhalt mit der classList-Methode ausgeblendet ist.contains() .
• Wenn der Inhalt ausgeblendet ist, entfernen Sie die hidden-Klasse des Inhalts mithilfe der classList-Methode.remove() .
• Wenn der Inhalt geöffnet ist, fügen Sie den Inhalt mithilfe der classList-Methode der hidden-Klasse hinzu.add() .

Hier ist ein Beispielcode:

function toggleSpoiler() else >

Es ist wichtig, dass das Element, an das der Click-Handler angehängt wird, ein onclick-Attribut mit dem Wert toggleSpoiler() hat. Zum Beispiel:

Кликни, чтобы открыть спойлер
Скрытый контент спойлера

Wenn Sie nun auf den Spoilertitel klicken, wird der Inhalt geöffnet und geschlossen.

Schritt 5: Stilisieren Sie Ihren Spoiler

Nachdem Sie die Grundstrukturen Ihres Spoilers erstellt haben, ist es an der Zeit, ihm einen Stil zu geben, damit er attraktiv aussieht und dem Design Ihrer Website entspricht.

Um zu beginnen, fügen Sie dem Element, das der Container für Ihren Spoiler ist, eine Klasse oder eine ID hinzu. Dadurch können Sie seinen Stil einfach über CSS anpassen.

Definieren Sie dann die Stile für Ihren Spoilerbehälter. Sie können die Hintergrundfarbe, die Schriftfarbe, die Einrückung und andere Eigenschaften ändern, um den Spoiler auf der Seite hervorzuheben. Verwenden Sie Klassen- oder ID-Selektoren, um das gewünschte Element auszuwählen.

Wenn Sie beim Ein- oder Ausblenden des Spoilers Animationen oder andere Effekte hinzufügen möchten, können Sie CSS-Übergänge, Übergänge oder Animationen verwenden.

Vergessen Sie nicht, dass es beim Styling des Spoilers wichtig ist, seine Verfügbarkeit zu berücksichtigen. Stellen Sie sicher, dass der Spoiler für Benutzer mit Behinderungen verfügbar ist und auf verschiedenen Geräten gut sichtbar ist.

Ein Beispiel:

Нажмите, чтобы открыть спойлер
Содержимое спойлера

In diesem Beispiel hat der Spoilercontainer einen grauen Hintergrund, einen Einzug und einen Mauszeiger beim Schweben. Der Inhalt des Spoilers ist zunächst ausgeblendet, aber wenn Sie auf den Titel klicken, wird er angezeigt.

Ändern Sie diese Stile so, dass sie Ihren Bedürfnissen und dem Design Ihrer Website entsprechen. Und stellen Sie sicher, dass Sie überprüfen, wie Ihr Spoiler auf verschiedenen Geräten und in verschiedenen Browsern aussieht, um sicherzustellen, dass er korrekt angezeigt wird.