Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Javascript Javascriptexamples JavaScript Hide Div

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript Hide Div

Advertisement
This page discusses - JavaScript Hide Div

JavaScript Hide Div

        

In this section, we are going to hide div element on clicking the button using the JavaScript.

In the given example, we have created a div element using <div> tag. The method document.getElementById('div') grabs the text of the div element and refer to property 'visibility' with style object. The 'visibility' property makes the element visible or invisible. Now, if you apply the visibility property with the 'hidden' value to the div element, the text of the div element will disappear and  if you use the 'visible' value, the text will be visible again. When you load the page you will get two buttons and text will be visible. But on clicking the button 'Hide', the function hideDiv() is called that makes the text invisible.

Here is the code:

<html>
<h2>Hide Div in JavaScript</h2>
<script language=javascript type='text/javascript'> 
function hideDiv() { 
if (document.getElementById) { 
document.getElementById('div').style.visibility = 'hidden'; 


function showDiv() { 
if (document.getElementById) { 
document.getElementById('div').style.visibility = 'visible'; 


</script> 
<body onload="javascript:showDiv()">
<button onclick="javascript:hideDiv()">Hide</button> 
<button onclick="javascript:showDiv()">Show</button>
<div id="div">Hello World</div>
</body>
</html>

Output will be displayed as:

On clicking the button 'Hide', the text will get disappear:

Download Source code:

 

        

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Discuss: JavaScript Hide Div  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com