How to use the Visibility Property in CSS

The visibility property controls whether to show or hide an element. When set to visible, the element will be displayed normally.

Open demo in new tab

css

1.visible {
2  visibility: visible;
3}
4
5.hidden {
6  visibility: hidden;
7}
8
9.collapse {
10  visibility: collapse;
11}

When set to hidden, the element will become invisible, but the space it occupies will still be preserved.

html

1<div class="visible">Visible</div>
2<div class="hidden">Hidden</div>
3<div class="visible">Visible</div>

As for collapse, different elements are treated differently. For table elements such as table rows or columns, the element will become invisible, and the space it occupies will be collapsed.

html

1<table>
2  <tr>
3    <th>Column 1</th>
4    <th>Column 2</th>
5    <th>Column 3</th>
6  </tr>
7  <tr>
8    <td>Data 1</td>
9    <td>Data 2</td>
10    <td>Data 3</td>
11  </tr>
12  <tr class="collapse">
13    <td>Data 4</td>
14    <td>Data 5</td>
15    <td>Data 6</td>
16  </tr>
17  <tr>
18    <td>Data 7</td>
19    <td>Data 8</td>
20    <td>Data 9</td>
21  </tr>
22</table>

But for other elements, it behaves the same as hidden.

In the next lesson, we are going to discuss the differences between visibility, opacity, and display: hidden.