How to hide a div by clicking anywhere on the page.

Forum Moderators: open

Message Too Old, No Replies

How to hide a div by clicking anywhere on the page.

show / hide div by clicking anywhere

FeralUK

3:06 pm on Jul 3, 2009 (gmt 0)

I got this script of the internet that toggles a hidden div on/off. I have converted this script into a drop down menu so the hidden div is the second level of the menu and is floating above the rest of the content. Can anyone please show me how to go about modifying the script so that the hidden div is hidden when i click anywhere on the page other than the div itself and not just when i click the toggle button. Thanks. ps. hope this wasn't too confusing.

HTML
<div id="mydiv"><a href="javascript:unhide('mydiv2');">Click here to show content</a>
</div>
<div id="mydiv2" class="hidden"> this hidden text will show when the link is pressed
</div>

CSS
.hidden { display: none; }
.unhidden { display: block; }

JAVASCRIPT
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>

rocknbil

7:35 pm on Jul 3, 2009 (gmt 0)

Welcome aboard FeralUK, this seems to work in both FF and IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function() { document.onclick=function() { document.getElementById('mydiv').style.display='none'; }; };
</script>
</head>
<body>
<p id="mydiv">Click and hide me</p>
<p>I won't hide.</p>
</body>
</html>
</html>

You would just change

window.onload=function() { document.onclick=function() { document.getElementById('mydiv').style.display='none'; }; };

window.onload=function() { document.onclick=function() { unhide('mydiv'); }; };

FeralUK

8:01 pm on Jul 3, 2009 (gmt 0)

Hey rocknbil.
That script works however it also closes the div even when i click on the div itself. This makes it impossible to put content on the div that is hidden.
I have some hyperlinks on the hidden div so when it appears the user can click on the links like a drop down menu. With this added script the hyperlinks don't work because clicking on them closes the div.
Is there any way to modify this new code so that it ignores the div that it is hiding and only closes if you click anywhere but the div.

Thanks for the previous code though. At least i'm getting somewhere.

rocknbil

12:22 am on Jul 4, 2009 (gmt 0)

Did you see the last bit, about changing the one line? Was hoping you'd have enough to figure it out . . . . but I see there's another complication.

Javascript in a page is not "aware" of the class of an item unless it's an inline selector; see this thread [webmasterworld.com] and link within it to sort out why. So you have to specifically set the class in the window.onload to get it to "know" what the initial load state is.

This should do it, using your classes (works here.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!-- doctype on one line --> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display: block; }  
</style> 
<script type="text/javascript"> 
window.onload=function() {  
 if (document.getElementById('mydiv')) { 
  document.onclick=function() { unhide('mydiv'); }; 
  document.getElementById('mydiv').className=='unhidden'; 
 } 
}; 
function unhide(divID) { 
 if (document.getElementById(divID)) { 
 var item = document.getElementById(divID); 
 item.className=(item.className=='hidden')?'unhidden':'hidden'; 
 } 
} 
</script> 
</head> 
<body> 
<p id="mydiv">Click and hide me</p> 
<p>I won't hide.</p> 
</body> 
</html>

As oft said, there's always more than one way to do it - for a simple show/hide, I wouldn't refer to the class name - what if you want to use this again on a site without these particular selectors? I'd just toggle the display:

if (document.getElementById(divID)) {
var item = document.getElementById(divID);
item.style.display=(item.style.display=='block')?'none':'block';
}

FeralUK

9:42 am on Jul 4, 2009 (gmt 0)

Thanks. It's all sorted now.