Show/Hide HTML Elements using JavaScript

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 NameDescription
inlineWill show the HTML Element without any paragraph break
blockWill show the HTML Element with paragraph break
noneWill 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>


Related Articles:

About Hitesh Agrawal

Wait... checking
Tagged . Bookmark the permalink.

One Response to Show/Hide HTML Elements using JavaScript

  1. Pingback: Hide/Show Elements on a Dashboard | Viz Hacker

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>