Controlling Element Visibility
Description
You can control the visibility of your elements using the visibility property.
The visibility Property Values are explained in details.
- collapse - The element isn't visible and doesn't occupy space in the page layout.
- hidden - The element isn't visible, but it still occupies space in the page layout.
- visible - This is the default value. The element is visible on the page.
Example
The following code demonstrates changing the visibility of an element using JavaScript and some button elements.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
tr>th {<!-- w ww .j a v a 2s. c o m-->
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>Favorite:</th>
<td>XML</td>
<td>CSS</td>
<td>HTML</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>HTML</td>
<td>CSS</td>
<td>XML</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>
The collapse value is only applicable to table-related elements, such as tr and td.