CSS visibility Property

CSS visibility property is used to show or hide an element.

Unlike the display:none;, the hidden element still remains as a part of the document and occupies the same space as it did when visible. See the example below:

Example:

h2{
   visibility: hidden;
}

The visibility property can also be used to show or hide rows and columns in a table.

To hide a row or column in a table use visibility: collapse;. See the example below:

Example:

.collapse{
  visibility: collapse;
}

CSS Syntax

The visibility property has the following syntax:

visibility: visible|hidden|collapse|initial|inherit;

Property Values

The visibility property accepts the following values:

visibleThe elements remains visible. This is the default value.
hiddenThe element becomes hidden. However, it still occupies the same space.
collapseHides the table elements. Such as rows, columns, table body, etc.
initialSets the visibility property to its default value(visible).
inheritInherits the visibility property from the parent element.

General Info

Default Valuevisible
InheritedYes
JavaScript Usageelement.style.visibility = “hidden”