Page 1 of 1

Toggle Collapsable DIV - Need to close

Posted: Tue Mar 08, 2011 7:41 am
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

Re: Toggle Collapsable DIV - Need to close

Posted: Tue Mar 08, 2011 7:47 am
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 ":"

Re: Toggle Collapsable DIV - Need to close

Posted: Tue Mar 08, 2011 7:56 am
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

Re: Toggle Collapsable DIV - Need to close

Posted: Tue Mar 08, 2011 8:36 am
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>

Re: Toggle Collapsable DIV - Need to close

Posted: Tue Mar 08, 2011 9:11 am
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

Re: Toggle Collapsable DIV - Need to close

Posted: Sun Mar 13, 2011 4:38 am
by phazorRise
instead of javascript you better use jquery. It gives you more freedom.

Re: Toggle Collapsable DIV - Need to close

Posted: Sun Mar 13, 2011 4:46 am
by VladSun
phazorRise wrote:instead of javascript ...
jQuery is an "end-user" JavaScript library :P

Re: Toggle Collapsable DIV - Need to close

Posted: Sun Mar 13, 2011 4:52 am
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. ;-)