How to hide div by onclick using javascript?

Question

I used javascript to display the div on onclick, but when I click on the div I want to hide the div. How to do this in javascript? I am using javascript code ..

<a href="javascript:;" onClick="toggle('one');"> function toggle(one) { var o=document.getElementById(one); o.style.display=(o.style.display=='none')?'block':'none'; } 

Answer 1

HTML

 <a href="#" onclick="toggle(event, 'box');">show/hide</a> 

Javascript

 // click on the div function toggle( e, id ) { var el = document.getElementById(id); el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none'; // save it for hiding toggle.el = el; // stop the event right here if ( e.stopPropagation ) e.stopPropagation(); e.cancelBubble = true; return false; } // click outside the div document.onclick = function() { if ( toggle.el ) { toggle.el.style.display = 'none'; } } 

Answer 2

you can use the blur () function when you clicked elsewhere

 $("#hidelink").click(function() { $("#divtoHide").show(); }); $("#hidelink").blur(function() { $("#divtoHide").hide(); }); 

Answer 3

Use jQuery and it will be as simple as:

$("button.hide").click(function(event){ $("div.hidethis").hide() });