The visibility CSS property specifies whether the boxes generated by an element are rendered.
CSS
JS
object.style.visibility = "value";
Values
<'visibility'> = visible | hidden | collapse | inherit
visible
The generated box is visible.
hidden
The generated box is invisible, but still affects layout. Descendants of the element will be visible if they have 'visibility: visible'.
collapse
The generated box is invisible and does not affect layout when used on rows, row groups, columns, or column groups. When not, 'collapse' has the same meaning as 'hidden'.
inherit
Specifies the same value as the parent.
Initial
collapse
hidden
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-of-type(2)
{
visibility: hidden;
}
</style>
</head>
<body>
<table>
<tr>
<td>hidden</td>
</tr>
<tr>
<td>hidden</td>
</tr>
<tr>
<td>hidden</td>
</tr>
</table>
</body>
</html>
visible
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
tr:nth-of-type(2)
{
visibility: visible;
}
</style>
</head>
<body>
<table>
<tr>
<td>visible</td>
</tr>
<tr>
<td>visible</td>
</tr>
<tr>
<td>visible</td>
</tr>
</table>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
table, td
{
border-style: solid;
}
</style>
<script>
function myfunction(myvar)
{
document.querySelector("tr:nth-of-type(2)").style.visibility = myvar;
}
</script>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">collapse</button>
<button onmouseover="myfunction(innerHTML)">hidden</button>
<button onmouseover="myfunction(innerHTML)">visible</button>
<table>
<tr>
<td>visibility</td>
</tr>
<tr>
<td>visibility</td>
</tr>
<tr>
<td>visibility</td>
</tr>
</table>
</body>
</html>
Internal
External