Controlling Element Visibility
The visibility property controls the visibility of elements.
The allowed values for the visibility property:
| Value | Description |
|---|---|
| collapse | The element isn't visible and doesn't occupy space. |
| hidden | The element isn't visible, but it still occupies space. |
| visible | The element is visible on the page(default value). |
The collapse value is only applicable to table-related elements, such as tr and td.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
tr > th { text-align:left; background:gray; color:white}
tr > th:only-of-type {text-align:right; background: lightgray; color:gray}
</style>
</head>
<body>
<table>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
<tr id="firstchoice">
<th>A:</th><td>CSS</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>B:</th><td>C</td><td>C</td><td>C</td>
</tr>
</table>
<p>
<button>Visible</button>
<button>Collapse</button>
<button>Hidden</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
document.getElementById("firstchoice").style.visibility =
e.target.innerHTML;
};
}
</script>
</body>
</html>