Toggle Collapsable DIV - Need to close

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
davidhopkins
Forum Commoner
Posts: 41
Joined: Thu Jun 10, 2010 7:52 am

Toggle Collapsable DIV - Need to close

Post by davidhopkins »

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
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Toggle Collapsable DIV - Need to close

Post by VladSun »

That's better:

Code: Select all

<a href="javascript:toggleDiv('mydiv');">Toggle Div Visibility</a>
Just add onclick event listener to your div.

Code: Select all

<div onclick="toggleDiv('mydiv');" ... 
PS:
"& # 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

Post by davidhopkins »

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&#058;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
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Toggle Collapsable DIV - Need to close

Post by VladSun »

davidhopkins wrote:Is there a way to get it to close when the user clicks anywhere bar inside the red box.
Not very clear, IMHO :)

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

Post by davidhopkins »

THank you very much this is just what i need :D 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
User avatar
phazorRise
Forum Contributor
Posts: 134
Joined: Mon Dec 27, 2010 7:58 am

Re: Toggle Collapsable DIV - Need to close

Post by phazorRise »

instead of javascript you better use jquery. It gives you more freedom.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Toggle Collapsable DIV - Need to close

Post by VladSun »

phazorRise wrote:instead of javascript ...
jQuery is an "end-user" JavaScript library :P
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
phazorRise
Forum Contributor
Posts: 134
Joined: Mon Dec 27, 2010 7:58 am

Re: Toggle Collapsable DIV - Need to close

Post by phazorRise »

VladSun wrote:
phazorRise wrote:instead of javascript ...
jQuery is an "end-user" JavaScript library :P
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. ;-)
Post Reply