Hide and display a div element using javascript
June 05, 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.
