CSS - visibility Property

Quiz

The visibility Property

CSS visibility property allows you to show or hide an element without changing the layout of a documentwhile hidden elements take up space.

The visibility property can be used to create a variety of effectssuch as hiding elements that are not yet ready to be displayedor 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 elementbut it still takes up space on the page.
collapse	It removes the table rowscolumnscolumn groupsand 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>
<>
   h2 {
      visibility: visible;
   }
</>
</head>
<body>
   <h2>Tutorials Point CSS visibility</h2>
</body>
</html>

Hide Elements with CSS visibility Property

To hide any HTML elementyou can use the visibility property with the hidden value. It hides the elementbut 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 pageeven though it is not visible.

Example

In this examplewe have hidden the heading of the web page using 'visibility: hidden;'.

<html>
<head>
<>
   h2 {
      visibility: hidden;
   }
</>
</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 rowcolumnor any cell without affecting the layout of the tableyou can set the visibility property of the rowcolumnor cell to collapse. This value is only valid for table elements.

Example 1

In this examplewe have used the 'visibility: collapse;' property to collapse the table cell. You can use it to hide any row or column.

<html>
<head>
<>
   .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;
   }
</>
</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 examplewe have used the 'visibility: collapse;' property on a non-table element. On a non-table elementit works as hidden value.

<html>
<head>
<>
   .collapse {
      visibility: collapse;
   }

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

Supported Browsers

Property
visibility	1.0	12.0	1.0	1.0	4.0

Print Page