Inhalte mit CSS ausblenden und anzeigen: Ein Trick ohne JavaScript

Bei der Arbeit mit der Webentwicklung ist die Kontrolle der Sichtbarkeit von Inhalten oft unerlässlich. Traditionell wird dies mit JavaScript erreicht, aber auch CSS kann verwendet werden, um elegante Ein- und Ausblendeffekte zu erzeugen. Nachfolgend wird eine solche Technik beschrieben, die eine spezifische Herausforderung angeht, die bei früheren Ansätzen aufgetreten ist.

Inhalt umschalten/ausblenden:

Man kann CSS verwenden, um einen Inhalt umzuschalten Ermöglicht Benutzern das Ein- und Ausblenden einer Liste von Elementen. Das folgende Snippet demonstriert diese Funktionalität:

#cont {
  display: none;
}
.show:focus   .hide {
  display: inline;
}
.show:focus   .hide   #cont {
  display: block;
}

Die Herausforderung:

Obwohl das obige CSS den gewünschten Effekt erzielt, weist es einen Nachteil auf. Wenn der Inhalt angezeigt wird, kann er durch einfaches Klicken auf eine beliebige Stelle auf der Seite ausgeblendet werden. Dieses Verhalten ist unerwünscht, da wir nur möchten, dass der Inhalt ausgeblendet wird, wenn auf den Link „Ausblenden“ geklickt wird.

Lösung:

Um dieses Problem zu beheben, Folgendes Überarbeiteter CSS- und HTML-Code kann verwendet werden:

CSS:

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}

HTML:

Hide Me
Show Me
Some alarming information here

Mit diesen Änderungen wird die Warnmeldung nur ausgeblendet, wenn auf das Span-Element „Hide Me“ geklickt wird. Diese Lösung löst das Problem effektiv und bietet eine CSS-basierte Methode zum Ausblenden und Anzeigen von Inhalten, ohne auf JavaScript angewiesen zu sein.