Displaying Div by clicking and hiding on double click

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.

<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;

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

<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 id="sub1">Double click the above Div box to hide Me</div>



* indicates required
Subscribe to plus2net


    Post your comments , suggestion , error , requirements etc here .

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer