CSS - visibility Property

Quiz

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>

Supported Browsers

Property
visibility	1.0	12.0	1.0	1.0	4.0

Print Page