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>

CSS Visibility Property Tutorial with Examples