Javascript - Show/Hide HTML Elements using JavaScript

Home > Javascript > Show/Hide HTML Elements using JavaScript

Show/Hide HTML Elements using JavaScript

January 12th, 2009 Hitesh Agrawal Leave a comment Go to comments

When it comes to showing or hiding any HTML elements, we can perform this operation in JavaScript in two ways:

visibility
display

To use visibility and display in javascript we are required to use the “style” attribute, this method represents the accessing CSS attributes in javascript.

style.visibility:
style.visibility will hide the element but will occupy the space allocated to the HTML element. To use style.visibility we need to pass either of two values “visible” or “hidden”.

Example:
Showing HTML Element using JavaScript:

document.getElementById('html element id').style.visibility = "visible";

Hiding HTML Element using JavaScript:

document.getElementById('html element id').style.visibility = "hidden";

style.display:
style.display will hide the element and will not occupy the space. To use style.display we need to pass either of these values “inline” or “block” or “none”;

NOTE:
In some cases you will find blank value(Example: “”) getting passed to style.display instead of “inline” or “block” or “none”. By passing blank value we are telling the browser to use default value to hide the element. It is recommended not to use blank value while using style.display property.

Property Name	Description
inline	Will show the HTML Element without any paragraph break
block	Will show the HTML Element with paragraph break
none	Will hide the HTML Element

Example:
Showing HTML Element with Paragraph Break:

document.getElementById('html element id').style.display = "block";

Hiding HTML Element:

document.getElementById('html element id').style.display = "none";

Showing HTML Element without Paragraph Break:

document.getElementById('html element id').style.display = "inline";

Code Demo:

<html>
<head>
<script type="text/javascript">
	function hideElementByVisible(obj) {
		document.getElementById(obj).style.visibility = "hidden";
	}
 
	function showElementByVisible(obj) {
		document.getElementById(obj).style.visibility = "visible";
	}
 
	function hideElementByDisplay(obj) {
		document.getElementById(obj).style.display = "none";
	}
 
	function showElementDisplay(obj) {
		document.getElementById(obj).style.display = "inline";
	}
 
	function showElementByDisplay(obj,prop) {
		if(prop == "block") {
			document.getElementById(obj).style.display = "block";
		}
		else if(prop == "inline") {
			document.getElementById(obj).style.display = "inline";
		}
	}
 
 
</script>
</head>
<body>
<input type="text" name="txtname" id="txtname" value="TextBox1" />
<input type="text" name="txtname1" id="txtname1" value="TextBox2" /><br />
Visible:<br />
<input type="button" value="Hide Element - TextBox1" onClick="hideElementByVisible('txtname');" />
<input type="button" value="Show Element - TextBox1" onClick="showElementByVisible('txtname');" /><br /><br />
Display:<br />
<input type="button" value="Hide Element - TextBox1" onClick="hideElementByDisplay('txtname');" />
<input type="button" value="Show Element - TextBox1" onClick="showElementDisplay('txtname');" /><br /><br />
 
Paragraph Show<br />
<input type="button" value="Show Element With Paragraph - TextBox2" onClick="showElementByDisplay('txtname','block');" />
</body>
</html>

Custom Search

Techie Zone

Show/Hide HTML Elements using JavaScript

Popular Articles:

Java Tutorial

Translator