The visibility Property
CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.
The visibility property can be used to create a variety of effects, such as hiding elements that are not yet ready to be displayed, or hiding elements that are only relevant to certain users.
Syntax
The syntax for the CSS visibility property is as follows:
visibility: visible | hidden | collapse | initial | inherit;
Possible Values
| Value | Description |
|---|---|
| visible | It is the default value where the elements are visible. |
| hidden | It hides the element, but it still takes up space on the page. |
| collapse | It removes the table rows, columns, column groups, and row groups from a table. The collapse has the same meaning as hidden if it is used on non-table elements. |
| initial | It sets the visibility of an element to its default value. |
| inherit | It inherits the visibility property from its parent element. |
Applies to
The visibility property can be applied to all the HTML elements.
CSS visibility – visible Value
You can use the visibility property with visible to make an element visible.
Example
The following example uses the visibility property to make the h2 element visible.
<html><head><style>
h2 {
visibility: visible;
}
</style></head><body><h2>Tutorials Point CSS visibility</h2></body></html>
Hide Elements with CSS visibility Property
To hide any HTML element, you can use the visibility property with the hidden value. It hides the element, but it does not remove it from the document layout. The element will still be accessible to screen readers and will affect the layout of the page, even though it is not visible.
Example
In this example, we have hidden the heading of the web page using ‘visibility: hidden;’.
<html><head><style>
h2 {
visibility: hidden;
}
</style></head><body><h2>Tutorials Point CSS visibility hidden</h2><p>The hidden heading is still visible to screen readers and takes up space in the page.</p></body></html>
Collapse Table Cells with CSS visibility
To remove a table row, column, or any cell without affecting the layout of the table, you can set the visibility property of the row, column, or cell to collapse. This value is only valid for table elements.
Example 1
In this example, we have used the ‘visibility: collapse;’ property to collapse the table cell. You can use it to hide any row or column.
<html><head><style>
.collapse {
visibility: collapse;
}
table {
border-collapse: collapse;
color: #ffffff;
width: 100%;
background-color: #35DC5A;
border: 2px solid black;
}
th,
td {
border: 2px solid black;
padding: 8px;
text-align: left;
font-size: 20px;
}
</style></head><body><table><tr><td>visible</td><td>hidden</td><td class="collapse">collapse</td></tr><tr><td>initial</td><td>inherit</td><td>revert</td></tr></table></body></html>
Example 2
In this example, we have used the ‘visibility: collapse;’ property on a non-table element. On a non-table element, it works as hidden value.
<html><head><style>
.collapse {
visibility: collapse;
}
</style></head><body><h2>Collapse on non-table elements</h2><p class="collapse">you cant see me</p><p>the above sentence is hidden</p></body></html>
Leave a Reply