Hide Div using Javascript

Nikunj K

11 years ago

To hide a div element using JavaScript, you can set its style. Display property to “none“.

Here’s an example:


  <!DOCTYPE html>
  <html>
  <head>
  	<title>Hide a div with JavaScript</title>
  	<script>
  		function hideDiv() {
  			var divElement = document.getElementById("myDiv");
  			divElement.style.display = "none";
  		}
  	</script>
  </head>
<body>
  	<div id="myDiv">
  		<p>This is the content of my div element.</p>
	</div>
  	<button onclick="hideDiv()">Hide the div</button>
</body>
  </html>

In this example, we define a div element with an id of “myDiv” and some sample content. We also define a button element that, when clicked, will call the hideDiv() function.

The hideDiv() function retrieves the div element by its ID using document.getElementById(), and then sets its style. display property to “none“. This effectively hides the div element from view.

Note that you can also show the div element again by setting its style. display property to “block” or another appropriate value, depending on the desired display behavior.

Share your Love