CSS Visibility

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

Copy to clipboard
Copy to clipboard

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;
}

Copy to clipboard
Copy to clipboard

Example 2

Hiding a <tr> element within a table.

tr {
  visibility: collapse;
}

Copy to clipboard
Copy to clipboard