Hiding and Showing Elements

Contact Us or call 1-877-932-8228
Hiding and Showing Elements

Hiding and Showing Elements

Elements can be hidden and shown by changing their visibility or display values. The visibility style can be set to visible or hidden and the display property can be set to block, table-row, none, and several other values. The two work slightly differently as the following example illustrates:

Code Sample:

CSSObjectModel/Demos/Visibility.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Showing and Hiding Elements with JavaScript</title>
<link href="visibility.css" rel="stylesheet">
<script>
function changeVisibility(id){
	var elem = document.getElementById(id);
	var visibility;
	if (elem.style.visibility == "hidden") {
		elem.style.visibility = "visible";
	} else {
		elem.style.visibility = "hidden";
	}
	var	computedStyle = getComputedStyle(elem,null);
	visibility = computedStyle["visibility"];
	msg("The <em>visibility</em> of row <em>" + id + "</em> is <em>" + visibility + "</em>.");
}

function changeDisplay(id){
	var elem = document.getElementById(id);
	var display;
	if (elem.style.display == "none") {
		elem.style.display = "";
	} else {
		elem.style.display = "none";
	}
	var	computedStyle = getComputedStyle(elem,null);
	display = computedStyle["display"];
	msg("The <em>display</em> of row <em>" + id + "</em> is <em>" + display + "</em>.");
}

function msg(text) {
	document.getElementById("msg").innerHTML = text;
}
</script>
</head>
<body>
<h1>Hiding and Showing Elements</h1>
<table>
	<tr id="tr1"><td>Row 1</td></tr>
	<tr id="tr2"><td>Row 2</td></tr>
	<tr id="tr3"><td>Row 3</td></tr>
	<tr id="tr4"><td>Row 4</td></tr>
</table>
<div id="msg">Style messages</div>
<h2>visibility</h2>
<button onclick="changeVisibility('tr1')">Row 1</button>
<button onclick="changeVisibility('tr2')">Row 2</button>
<button onclick="changeVisibility('tr3')">Row 3</button>
<button onclick="changeVisibility('tr4')">Row 4</button>

<h2>display</h2>
<button onclick="changeDisplay('tr1')">Row 1</button>
<button onclick="changeDisplay('tr2')">Row 2</button>
<button onclick="changeDisplay('tr3')">Row 3</button>
<button onclick="changeDisplay('tr4')">Row 4</button>
</body>
</html>

Code Explanation

This page has two functions: changeVisibility() and changeDisplay(). The changeVisibility() function checks the value of the visibility style of the passed element and changes it to its opposite. The changeDisplay() function does the same with the display style. The functions are called with buttons on the page and are passed in ids of table rows from the table on the page.

The main difference between setting visibility to hidden and setting display to none is that setting visibility to hidden does not modify the layout of the page; it simply hides the element. Setting display to none, on the other hand, collapses the element, so that the surrounding relatively positioned elements re-position themselves.

Check out the screenshot below:

Row 1 has visibility set to hidden, so you can see the space for the row, but you cannot see the row itself. Row 3 has display set to none so it's as if the row was not even there.

Next