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:

<meta charset="UTF-8">
<title>Showing and Hiding Elements with JavaScript</title>
<link href="visibility.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
	function changeVisibility(id){
		var elem = document.getElementById(id);
		var visibility;
		if (elem.style.visibility=="hidden") {
			elem.style.visibility = "visible";
		} else {
			elem.style.visibility = "hidden";
		visibility = getCurrentStyle(elem,"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";
		display = getCurrentStyle(elem,"display");
		msg("The <em>display</em> of row <em>" + id + "</em> is <em>" + display + "</em>.");
	function msg(text) {
		document.getElementById("msg").innerHTML = text;
<h1>Hiding and Showing Elements</h1>
	<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>
<div id="msg">Style messages</div>
<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>

<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>

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.

The following line of code may have grabbed your attention:

elem.style.display = "";
According to the CSS specification, the proper way to display a table row is by setting the display property to table-row; however Internet Explorer 6 and earlier do not support this value. To get the script to behave correctly in IE6, the display must be set to block; however, that messes up standard browsers, which display blocks as blocks, not as table rows. One solution is to set the value to an empty string ("") as in the line of code above. That tells the browser to display the table row as it normally would without any display styling at all.