CSS visibility Property
The visibility CSS property defines whether the element is visible to the user or hidden. Find some examples and try them for yourself.
The visibility property is used to specify whether an element should be visible or hidden to the user.
It has the following values: visible, hidden, and collapse.
When the element is set to "hidden", the content of that tag becomes fully transparent, but it retains its original space in the layout. Descendant elements of the hidden element can be visible if visibility: visible is applied to them.
If the value of the visibility property is set to "collapse", it is used with table-related elements (such as rows, columns, and cells) to remove them from the layout while preserving the table structure.
Some browsers do not use "collapse" value.
| Initial Value | visible |
|---|---|
| Applies to | All elements (collapse only applies to table-related elements). |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | CSS2 |
| DOM Syntax | Object.style.visibility = "collapse"; |
Syntax
Syntax of CSS visibility Property
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Example of the visibility property with the "hidden" value:
Example of CSS visibility Property with hidden value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Result
Example of the visibility property with the "visible" and "hidden" values:
Example of CSS visibility Property with visible and hidden values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Example of the visibility property with the "collapse" value:
Example with CSS visibility Property with collapse value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| visible | In this case the tag is visible. This is the default value of this property. | Play it » |
| hidden | This value only visually hides the elements. | Play it » |
| collapse | Used with particular table elements (rows, row groups, columns, column groups) to remove entire rows or columns. This value has the same meaning as "hidden" when used with other elements. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. | |
| revert | Reverts the property to its inherited value or initial value, depending on what is applicable. | Play it » |
| revert-layer | Reverts the property to the value set in the previous layer of the cascade. | Play it » |
Practice
What are the possible values of the CSS 'visibility' property?