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:
| visible | The element remains visible. This is the default value. |
| hidden | The element becomes hidden. However, it still occupies the same space. |
| collapse | Hides the table elements. Such as rows, columns, table body, etc. |
| initial | Sets the visibility property to its default value(visible). |
| inherit | Inherits the visibility property from the parent element. |
General Info
| Default Value | visible |
| Inherited | Yes |
| JavaScript Usage | element.style.visibility = “hidden” |
