OnClick & on Double click event handler of div layer with Demo script

By using div attribute onClick and ondblclick we can manage display of another div layer with message. First on Click the layer will be displayed and then on double click the same layer will be hidden. Here we have used to attributes of div tag, one is onClick and other one is ondblclick.


<html>
<head>
<title>Demo of onClick and on double click ondblclick event using div layer</title>
<style type="text/css">
div {
position: absolute;
left: 400px;
top: 100px;
background-color: #306080;
width: 300px;
padding: 10px;
color: white;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

<body >
<div id='my_page2' style="z-index: 2; position: relative; right: 0px; top: 10px; background-color: #cccc33; width: 180px; padding: 10px; color: white; border: #0000cc 2px  dashed;display: inline; "
onClick="setVisibility('sub1', 'inline');"  ondblclick="setVisibility('sub1','none');"
>
Click this to display   
</div>

<div id="sub1">Double click the above Div box to hide Me</div>

</body>
</html>

Displaying Div by clicking and hiding on double click

Subscribe