
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!
Read also: