CSS visibility Property

The CSS visibility property defines whether or not an element is visible.

Demo:

Click the “Try it” button to set the visibility property of the DIV element to “hidden”:

Hi!

Note: Hidden elements take up space on the page. Use the display property to remove an element from the document layout!

Syntax:

visibility: visible|hidden|collapse;

visible (default) – the element is visible.

hidden – the element is hidden (but still takes up space).

collapse – this value removes a row or column, but it does not affect the table layout.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.a {
  visibility: visible;
}

.b {
  visibility: hidden;
}
</style>
</head>
<body>

<p class="a">This paragraph is visible.</p>
<p class="b">This paragraph is hidden.</p>

</body>
</html>

Output:

This paragraph is visible.

This paragraph is hidden.

Example2:

<!DOCTYPE html>
<html>
<head>
<style>

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid #333;
}

td {
  border: 1px solid #333;
}


</style>
</head>
<body>

<table>
  <tr>
    <td>1</td>
    <td class="collapse">2</td>
    <td>3</td>
  </tr>
  <tr class="collapse">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

</body>
</html>

Output:

1	2	3
1	2	3
4	5	6

Enjoy coding!

Share this: