Elemente mit visibility verstecken und sichtbar machen

Auf Websites müssen HTML-Elemente manchmal versteckt und durch eine Aktion wieder sichtbar gemacht werden oder umgekehrt. Zum Ausblenden wird häufig die CSS-Eigenschaft display mit dem Wert none verwendet. Eine andere Möglichkeit bietet die Eigenschaft visibility. Zwischen den beiden Eigenschaften gibt es einige Unterschiede. Wird ein Element mit visibility versteckt, wird der Platz hierfür trotzdem reserviert. Bei display: none; verhält es sich dagegen so, als würde das Element nicht existieren und die nachfolgenden Elemente nehmen den Platz ein. Außerdem ist eine Animation mit visibility möglich.

Sichtbarkeit mit visibility festlegen

Während mit display auch das Verhalten der Elemente geändert werden kann, z.B. um Inline-Elemente wie Block-Elemente verhalten zu lassen, ist die Eigenschaft visibility im Grunde nur zum Verstecken und sichtbar machen von Elementen gedacht. Die Syntax ist anhand eines Beispiels nachfolgend abgebildet.

CSS-Code mit visibility

Werte für die Eigenschaft visibility

Die folgenden Werte können für visibility angegeben werden.

  • visible (Standardwert, Element ist sichtbar)
  • hidden (Element wird versteckt bzw. ist unsichtbar, der Platz wird dafür gelassen)
  • collapse (Zum Verstecken von Tabellenzeilen und -spalten)
  • inherit (Vererbung durch Elternelement)

Beispielcodes mit visibility

Nachfolgend sind Beispielcodes für visibility mit den Werte visible, hidden und collapse.

.selektor1 {
visibility: hidden;
}

.selektor2 {
visibility: visible;
}

.selektor3 {
visibility: collapse;
}

.tabellenrahmen {
border: 1px solid #001055;
}
<p class="selektor1">Verstecktes Element</p>

<p class="selektor2">Sichtbares Element</p>

<table class="tabellenrahmen">
  <tr class="selektor3">
    <td>
    Zeile 1, Spalte 1
    </td>
    <td>
    Zeile 1, Spalte 2
    </td>
  </tr>
  <tr>
    <td>
    Zeile 2, Spalte 1
    </td>
    <td>
    Zeile 2, Spalte 2
    </td>
  </tr>
</table>

Die Darstellung im Browser würde bei den Beispielcodes wie folgt sein.

Darstellung bei Verwendung von visibility

Die Unterstützung des Werts collapse ist nicht bei allen Browsern gegeben bzw. zum Teil fehlerhaft.