How to Toggle Divs With Javascript
- 1). Copy and paste the following code into the head of your HTML document. This code looks for an HTML element with the ID "myDiv" and then hides it if it's visible or shows it if it's hidden:
<script type="text/javascript">
<!--
function toggle_visibility() {
var e = document.getElementById('myDiv');
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script> - 2). Copy and paste the following code into the body of your HTML document. This creates the "myDiv" element and creates a link that will trigger the code from step 1 to run when you click on it:
<div>This is the div that can be toggled</div>
<a onclick="javascript:toggle_visibility()">Click to Toggle the Div!</a> - 3). Open the Web page in your favorite browser and click the link in the page to toggle the div on and off.
Source...