Visibility

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 13, 2021Updated Feb 5, 2024
Contribute to Docs

The visibility property shows or hides an element. If the element is hidden, it will still take up space within the page.

Syntax

visibility: <value>;

The visibility property has three values.

  • visible: Shows the element.
  • hidden: Hides the element.
  • collapse: Hides both the element and the space it would have occupied.

Note: collapse should only be used with <table> rows, row groups, columns, and column groups. If collapse is used on other elements, it will be treated the same as hidden. Implementing collapse within a <table> can be especially useful because it allows for hiding rows or columns without affecting the table layout.

Example 1

Hiding an element with a class of hide.

.hide {
visibility: hidden;
}

Example 2

Hiding a <tr> element within a table.

tr {
visibility: collapse;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy