Beispiel: HTML Visibility

Lass uns das Beispiel Schritt für Schritt durchgehen:

<style>: Hier definierst du ein Stylesheet für deine HTML-Seite.
.hidden { visibility: hidden; }: Hier definierst du eine Klasse mit dem Namen "hidden", die die Eigenschaft "visibility: hidden" enthält. Diese Eigenschaft versteckt das Element, dessen Klasse "hidden" ist.
<p class="hidden">Dies ist ein versteckter Absatz.</p>: Hier verwendest du die Klasse "hidden" auf einem Paragraph-Element. Dadurch wird der Absatz versteckt, obwohl er im HTML-Code vorhanden ist.

Mit diesem Code hast du einen einfachen Weg, um Elemente auf deiner HTML-Seite zu verstecken oder anzuzeigen. Du musst nur die Klasse des Elements ändern, um seine Sichtbarkeit zu ändern.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .hidden {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <p>Dies ist ein sichtbarer Absatz.</p>
    <p class="hidden">Dies ist ein versteckter Absatz.</p>
  </body>
</html>