Sometimes, you need to show an element, or hide an element based on a user action.
This can be done using a simple onclick command.
To get used to this, save the content below into a html file and open it to see the effect. We've added some style to the div's to avoid any need for an initial 'double click'
PHP Code:
<!DOCTYPE html>
<html>
<head>
<title>Show or Hide Element using JavaScript</title>
<script type="text/javascript">
<!--
function showhide(elementid) {
var element = document.getElementById(elementid);
if(element.style.display == 'block')
element.style.display = 'none';
else
element.style.display = 'block';
}
//-->
</script>
</head>
<body>
<h2>Show or Hide a DIV using JavaScript</h2>
<a href="#" onclick="showhide('divOne'); return false">Toggle divOne</a>
<div id="divOne" style="display:block;border:1px solid red;width:400px;height:100px;">This is Div Number One</div>
<br />
<hr>
<br />
<a href="#" onclick="showhide('divTwo'); return false">Toggle divTwo</a>
<div id="divTwo" style="display:none;border:1px solid blue;width:400px;height:100px;">This is Div Number Two</div>
</body>
</html>