CSS visibility Property

The visibility property is used to specify the element that should be visible or hidden to the user.

It has the following values: visible, hidden and collapses.

When the element is set to “hidden”, the content of that tag becomes fully transparent, but it will display the place of it. But the 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 can be used in Flexbox.

Initial Value	visible
Applies to	All elements.
Inherited	Yes.
Animatable	Yes.
Version	CSS2
DOM Syntax	Object.style.visibility = “collapse”;

Syntax

visibility: visible | hidden | collapse | initial | inherit;

Example of the visibility property with the “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:

<!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:

<!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>

My Blog