The CSS provides the visibility
attribute in order to show, collapse and hidden some HTML elements. Visibility element usage is very simple where we have to provide values like visible
, hidden
, collapse
. The visibility CSS attribute is supported by all major browsers like Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Microsoft Edge, and mobile versions.
Syntax
CSS visibility attribute has the following syntax.
visibility: VALUE;
- `visibility` is the attribute we will use.
- `VALUE` is the visibility attribute value that can be visible, hidden and collapse.
Visibility Attribute Visible Value
We can make an HTML element visible by setting the visible
value to the visibility
CSS attribute like below. The visible
value is the default value for the visibility
attribute. So if the element is visible we do not have to set the visible
value to make it visible.
<!DOCTYPE html> <html> <head> <style> h1 {visibility:visible;} </style> </head> <body> <h1>This Is The 1st Header</h1> <h1>This Is The 2st Header</h1> <h1>This Is The 3st Header</h1> <h1>This Is The 4st Header</h1> <h1>This Is The 5st Header</h1> <h1>This Is The 6st Header</h1> <h1>This Is The 7st Header</h1> <h1>This Is The 8st Header</h1> </body> </html>

Visibility Attribute Hidden Value
We can also make some elements invisible or hidden by using the visibility
attribute. We will set the value hidden
for the visibility attribute like below. In the following example, we will set the h1
elements invisible.
<!DOCTYPE html> <html> <head> <style> h1 {visibility:hidden;} </style> </head> <body> <h1>This Is The 1st Header</h1> <p>This Is The 2st Header</p> <h1>This Is The 3st Header</h1> <p>This Is The 4st Header</p> <h1>This Is The 5st Header</h1> <p>This Is The 6st Header</p> <h1>This Is The 7st Header</h1> <p>This Is The 8st Header</p> </body> </html>

We can see from the screenshot that the H1 elements are hidden but their places and areas do not collapse.
Visibility Attribute Collapse
The visibility attribute also accepts the collapse
value which can be useful for table rows and columns. By using this value the given row or column can be removed and space can be used for other elements. If the collapse value is used for other elements it will assumed as hidden
.

<!DOCTYPE html> <html> <head> <style> table, td { border: 1px solid black; } tr.collapse { visibility: collapse; } </style> </head> <body> NORMAL TABLE <table> <tr> <td>İsmail</td> <td>Baydan</td> </tr> <tr> <td>Ahmet Ali</td> <td>Baydan</td> </tr> <tr> <td>Elif Ecrin</td> <td>Baydan</td> </tr> </table> <br><br> COLLAPSED TABLE <table> <tr> <td>İsmail</td> <td>Baydan</td> </tr> <tr class="collapse"> <td>Ahmet Ali</td> <td>Baydan</td> </tr> <tr> <td>Elif Ecrin</td> <td>Baydan</td> </tr> </table> </body> </html>
Inherit
If the HTML document is designed in a hierarchical manner and we want to use the visibility attribute from the parent elements we can use inherit
value or keyword which will get the parents value and set for the current element.
Visibility vs Display Attribute
There is also the attribute named display
is functioning similar to the visibility attribute. But there is important difference. Visibility attribute will only hide the given element but the space it takes will be reserved on the other side display
attribute will remove the given element completely. In the following example, we will set the h2 element display to the none
which will be removed completely where the h1 elements will be only set invisible or hidden where their space is preserved.
<!DOCTYPE html> <html> <head> <style> h1 {visibility:hidden;} h2 {display:none;} </style> </head> <body> <h1>This Is The 1st Header</h1> <p>This Is The 2st Header</p> <h2>This Is The 3st Header</h2> <p>This Is The 4st Header</p> <h1>This Is The 5st Header</h1> <p>This Is The 6st Header</p> <h2>This Is The 7st Header</h2> <p>This Is The 8st Header</p> </body> </html>
