Erstellen Sie einen Spoiler in Javascript, CSS und XHTML

Erstellen Sie einen Spoiler (Show / Hide-Effekt) in Javascript, CSS und XHTML

Hier unten ist ein kleines Skript, mit dem Sie eine Art Spoiler in Javascript erstellen können, mit dem Sie ein Div beim Klicken ein- oder ausblenden können.

Wir werden zwei div verwenden:

  • Der erste zeigt unseren Text mit einem Link an ... beim Anklicken wird ein zweiter Div angezeigt
  • Der zweite Div enthält einen Link. Über diesen Link können Sie das div ausblenden.

Wir werden natürlich zwei JavaScript-Funktionen verwenden, CSS und XHTML.

In unserer ersten Abteilung:

Plusieurs langages de développement Web vorhanden: Afficher les langages

Erstellen Sie die zweite Div. Dieses Div ist ausgeblendet und wird nur angezeigt, wenn Sie auf das erste Div klicken:

  • XHTML
  • CSS
  • PHP
  • Cacher

Nun zum CSS-Teil:

 # layer1 {

Sichtbarkeit: sichtbar;

Position: relativ;

}

# layer2 {

Sichtbarkeit: versteckt;

Position: absolut;

}

Das JavaScript:

 funktion afficher () {

document.getElementById ('layer2'). style.visibility = 'visible'; document.getElementById ('layer2'). style.position = 'relative';

document.getElementById ('layer3'). style.visibility = 'versteckt';

}

Funktion fermer () {

document.getElementById ('layer2'). style.visibility = 'hidden';

document.getElementById ('layer2'). style.position = 'absolute';

document.getElementById ('layer3'). style.visibility = 'visible';

}

Vorherige Artikel Nächster Artikel

Top-Tipps