Toggle Collapsable DIV - Need to close
Moderator: General Moderators
-
davidhopkins
- Forum Commoner
- Posts: 41
- Joined: Thu Jun 10, 2010 7:52 am
Toggle Collapsable DIV - Need to close
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
Re: Toggle Collapsable DIV - Need to close
That's better:
Just add onclick event listener to your div.
PS:
"& # 0 5 8 ;" is for ":"
Code: Select all
<a href="javascript:toggleDiv('mydiv');">Toggle Div Visibility</a>Code: Select all
<div onclick="toggleDiv('mydiv');" ... "& # 0 5 8 ;" is for ":"
Last edited by VladSun on Tue Mar 08, 2011 8:48 am, edited 1 time in total.
There are 10 types of people in this world, those who understand binary and those who don't
-
davidhopkins
- Forum Commoner
- Posts: 41
- Joined: Thu Jun 10, 2010 7:52 am
Re: Toggle Collapsable DIV - Need to close
Thank you for the very quick reply.
I have changed my Div to this noe
[text]<div id="mydiv" style="display:none; background-color:#F00; position:absolute; top:0px; right:0px;" onClick="javascript:toggleDiv('mydiv');";><h3>This is a test!<br>Can you see me?</h3></div>[/text]
although this hides the div when you click within the DIV. what i want is when you click anywhere but the DIV it gets hidden.
Thanks
Dave
I have changed my Div to this noe
[text]<div id="mydiv" style="display:none; background-color:#F00; position:absolute; top:0px; right:0px;" onClick="javascript:toggleDiv('mydiv');";><h3>This is a test!<br>Can you see me?</h3></div>[/text]
although this hides the div when you click within the DIV. what i want is when you click anywhere but the DIV it gets hidden.
Thanks
Dave
Re: Toggle Collapsable DIV - Need to close
Not very clear, IMHOdavidhopkins wrote:Is there a way to get it to close when the user clicks anywhere bar inside the red box.
Code: Select all
<!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>
</head>
<body>
<a id="toggler" href="#">Toggle Div Visibility</a>
<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>
<script>
function cancelEvent(e)
{
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
function closeRedBox()
{
this.redBox.style.display ='none';
}
function toggleRedBox(e)
{
cancelEvent(e);
this.redBox.style.display = (this.redBox.style.display === 'block' ? 'none' : 'block');
}
var redBox = document.getElementById('mydiv');
var toggler = document.getElementById('toggler');
document.redBox = redBox;
toggler.redBox = redBox;
document.onclick = closeRedBox;
redBox.onclick = cancelEvent;
toggler.onclick = toggleRedBox;
</script>
</body>
</html>There are 10 types of people in this world, those who understand binary and those who don't
-
davidhopkins
- Forum Commoner
- Posts: 41
- Joined: Thu Jun 10, 2010 7:52 am
Re: Toggle Collapsable DIV - Need to close
THank you very much this is just what i need
its perfect, thanks and sorry for not being clear in the first place.
Just out of question, how easy would it be to implment so that i could have two links as below
<a id="toggler" href="#">Toggle Div Visibility</a>
one link would open the red box, and the second would open a blue box say ?
Thanks
David
Just out of question, how easy would it be to implment so that i could have two links as below
<a id="toggler" href="#">Toggle Div Visibility</a>
one link would open the red box, and the second would open a blue box say ?
Thanks
David
- phazorRise
- Forum Contributor
- Posts: 134
- Joined: Mon Dec 27, 2010 7:58 am
Re: Toggle Collapsable DIV - Need to close
instead of javascript you better use jquery. It gives you more freedom.
Re: Toggle Collapsable DIV - Need to close
jQuery is an "end-user" JavaScript libraryphazorRise wrote:instead of javascript ...
There are 10 types of people in this world, those who understand binary and those who don't
- phazorRise
- Forum Contributor
- Posts: 134
- Joined: Mon Dec 27, 2010 7:58 am
Re: Toggle Collapsable DIV - Need to close
Yeah I know. I mean to he's using javascript as it is. It would be better if he use jquery. We both know it can extend upto programmes's needs.VladSun wrote:jQuery is an "end-user" JavaScript libraryphazorRise wrote:instead of javascript ...