Hide and display a div element using javascript

June 5, 2011 - 05:27

You may wish to hide or display a certain area of your website when the user clicks on a mouse. To do this first you need to create your area which will be hidden to begin with, and then later displayed using the javascript.

<div id="hiddendiv" style="display:none">
This is a hidden div
</div>



The above code is the HTML needed for the hidden div. If you wish this to be shown initially then replace the display:none with display:block.

document.getElementById("hiddendiv").style.display="block";



or

document.getElementById("hiddendiv").style.display="none";




Finally call the javascript shown above to display or hide the hidden div, this code can be placed on a onclick or a mouseover event.



© 2011 simplevb.net