Toggle Collapsable DIV - Need to close
Posted: Tue Mar 08, 2011 7:41 am
Hello all.
I am trying to create a collapsable Div panel to show some extra content when the user requests.
I have got it working using this code
[text]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="mydiv" style="display:none; background-color:#F00; position:absolute; top:0px; right:0px;"><h3>This is a test!<br>Can you see me?</h3></div>
<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>
</body>
</html>[/text]
It works fine apart from to close the red box you have to click the Toggle Div Visibility message again. Is there a way to get it to close when the user clicks anywhere bar inside the red box.
Im trying to create something like that used on the Facebook website, when you are logged in clicking "Account" in the top right corner shows you some extra links. clicking on "Account" again or anywhere bar those links then closes the box.
ANy suggestions ?
Thanks
DAve
I am trying to create a collapsable Div panel to show some extra content when the user requests.
I have got it working using this code
[text]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="mydiv" style="display:none; background-color:#F00; position:absolute; top:0px; right:0px;"><h3>This is a test!<br>Can you see me?</h3></div>
<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>
</body>
</html>[/text]
It works fine apart from to close the red box you have to click the Toggle Div Visibility message again. Is there a way to get it to close when the user clicks anywhere bar inside the red box.
Im trying to create something like that used on the Facebook website, when you are logged in clicking "Account" in the top right corner shows you some extra links. clicking on "Account" again or anywhere bar those links then closes the box.
ANy suggestions ?
Thanks
DAve