show/hide dig tag (for a menu) to stay Open or Close

I love that I can minimize and maximize a menu especially when the menu is long and user can hide what they dont want to see. This scripts to show and hide the dig tags works well, however if you close the browser or refresh it, the menu will not stay closed you manually have to close it every time the page is open, is there a way to keep keep it close?


<script type="text/javascript"> 
function showhide(id) {
	if (document.getElementById) {
		obj = document.getElementById(id);
		if (obj.style.display == "none") {
			obj.style.display = "";
		} else {
			obj.style.display = "none";
		}
	}
}
</script>
 
 
<div class="titlewhiteTop">
	<div class="sideIndent"><span style="float:left; padding-bottom: 2px"><a href="#" title="title here"><strong><acronym title="title here">ACO</acronym></strong></a></span> <span style="float:right"><a href="#" onclick="showhide('hidethis'); return(false);"><strong style="font-size: x-small" title="Maximize/Minimize"> +/- </strong></a></span></div>
</div>
<div class="side" id="hidethis">
	<ul class="sideMenuUL">
	<li><a href="#">title here</a></li>
	<li><a href="#">title here</a></li>
	<li><a href="#">title here</a> </li>
	<li><a href="#">title here</a></li>
	<li><a href="#">title here</a></li>
	<li><a href="#">title here</a></li>
	</ul>
</div>

Open in new window

clubzoneAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

IsisagateCommented:
to keep the settings around after the browser is closed you will need to use a server language like PHP, ASP, or JSP to track the changes to the menu in the user's session
0
clubzoneAuthor Commented:
ASP is the other option, but it can't be done in javascript ?
0
Albert Van HalenAnalyst developerCommented:
You could store the information (menu = closed / open) in a cookie, every time you open / close the menu.
When your page is rendered you could have a javascript function that reads the cookie and thus setting your menu to open / close.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

clubzoneAuthor Commented:
how would I do this, do you have a code for me?
0
hieloCommented:
Here is a javascript solution that uses cookies. Most people have their cookies turned on. Those that don't will simply have to deal with this as it currently is, so you really are not "hurting" anyone. Simply put, if your clients have cookies turned on, they will have a "nicer" user experience.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript"> 
function showhide(id,displayStatus) {
	if (document.getElementById) {
		obj = document.getElementById(id);
		if("string"===typeof(displayStatus) ){
			obj.style.display = displayStatus;
		}
		else if (obj.style.display == "none") {
			obj.style.display = "";
			createCookie("menustatus","",365);
		} else {
			obj.style.display = "none";
			createCookie("menustatus","none",365);
		}
	}
}
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,"",-1);
}
window.onload = adjustMenu;
 
function adjustMenu()
{
	var previous = readCookie("menustatus");
	if( previous )
	{
		showhide('hidethis', previous);
	}
}
</script>
 
 
<div class="titlewhiteTop">
	<div class="sideIndent"><span style="float:left; padding-bottom: 2px"><a href="#" title="title here"><strong><acronym title="title here">ACO</acronym></strong></a></span> <span style="float:right"><a href="#" onclick="showhide('hidethis'); return(false);"><strong style="font-size: x-small" title="Maximize/Minimize"> +/- </strong></a></span></div>
</div>
<div class="side" id="hidethis">
	<ul class="sideMenuUL">
	<li><a href="#">title here</a></li>
	<li><a href="#">title here</a></li>
	<li><a href="#">title here</a> </li>
	<li><a href="#">title here</a></li>
	<li><a href="#">title here</a></li>
	<li><a href="#">title here</a></li>
	</ul>
</div>
</body>
</html>

Open in new window

0
clubzoneAuthor Commented:
I get an error:

object required on line 15:  obj.style.display = displayStatus;


0
hieloCommented:
How are you calling it? I tested the code above and it works fine for me.
0
hieloCommented:
Make sure you are passing the correct id value as the first argument to showhide. Otherwise you will see the previous error message. Your function to the one below:
function showhide(id,displayStatus) {
	if (document.getElementById) {
		obj = document.getElementById(id);
		if(!obj)
		{
			alert("Invalid id detected: " + id);
			return false;
		}
		if("string"===typeof(displayStatus) ){
			obj.style.display = displayStatus;
		}
		else if (obj.style.display == "none") {
			obj.style.display = "";
			createCookie("menustatus","",365);
		} else {
			obj.style.display = "none";
			createCookie("menustatus","none",365);
		}
	}
}

Open in new window

0
clubzoneAuthor Commented:
Okay, it works :)

but how do I include more then 1 ID, if I type it like this:

showhide('hidethis', previous) & showhide('hidemenu2', previous);

it will keep both open or both close, and not 1 open and 1 close.

0
hieloCommented:
showhide operates on a single element at a time. So if you want to showhide three different elemetns you need to call them independently.

>>it will keep both open or both close, and not 1 open and 1 close.
The correct way to call it is by separating the function calls with a semicolon:
showhide('hidethis', previous) ;showhide('hidemenu2', previous);

but, you must understand that showhide togges the element's current state, so if initially both elements are expanded, calling them as shown above will collapse both. If you want to have one opened and one closed at load time you would need to collapse one of them at load time.
window.onload= function(){ showhide('hidethis','block'); showhide('hidemenu2','none'); };

but I believe what you really need is to call them independently.
0
clubzoneAuthor Commented:
thanks for your response. At load time, I want all menu to be open, the cookie if for the user to choose wether to leave 2 open and 2 menu close of their choice. I will give you the points of giving me a good script, but I am still trying to see if its possible to have 4 different DIV tags that can be closed or opened base on the user preferences saved as a cookie. If you have more ideas let me know ;-)

0
hieloCommented:
>> 4 different DIV tags that can be closed or opened base on the user preferences saved as a cookie.
Yes, you can. It was designed for this purpose. Based on what you posted previously:
showhide('hidethis', previous) & showhide('hidemenu2', previous);

The reason it is not working for you is either you are chaining the calls:
onclick="showhide('hidethis', previous); showhide('hidemenu2', previous);"

or are supplying the second argument all the time. On my "complete" post above I have:

//call adjustMenu as soon as the window finishes loading
window.onload = adjustMenu;
 
function adjustMenu()
{                    //try to retrieve cookie that has the last saved status
      var previous = readCookie("menustatus");
      if( previous )//check if the cookie was found
      {
                                          //use the cookie to set the "status" of hidethis.
            showhide('hidethis', previous);
      }
}

But notice that I only supply the second argument at load time. After that, you don't need the second argument. If you pay attention to the +/- link you will see:
<a href="#" onclick="showhide('hidethis'); return(false);"><strong style="font-size: x-small" title="Maximize/Minimize"> +/- </strong></a>
See how it does not have the second argument? So the problem is that you are not using correctly. I have used it with multiple elements and managed to save and restore preferences across sessions.
0
clubzoneAuthor Commented:
Hey, your answer seems very good, I seem to not follow very well. I am still a noob with javascript, I try something like this, of course its not working, perhaps you can correct me and give your example with 2 or more DIVs.


<script type="text/javascript"> 
function showhide(id,displayStatus) {
	if (document.getElementById) {
		obj = document.getElementById('hideaco');
		if(!obj)
		{
			alert("Invalid id detected: " + id);
			return false;
		}
		if("string"===typeof(displayStatus) ){
			obj.style.display = displayStatus;
		}
		else if (obj.style.display == "none") {
			obj.style.display = "";
			createCookie("menustatus","",365);
		} else {
			obj.style.display = "none";
			createCookie("menustatus","none",365);
		}
	}
}
function showhide2(id,displayStatus) {
	if (document.getElementById) {
		obj = document.getElementById('hideinit');
		if(!obj)
		{
			alert("Invalid id detected: " + id);
			return false;
		}
		if("string"===typeof(displayStatus) ){
			obj.style.display = displayStatus;
		}
		else if (obj.style.display == "none") {
			obj.style.display = "";
			createCookie("menustatus2","",365);
		} else {
			obj.style.display = "none";
			createCookie("menustatus2","none",365);
		}
	}
}
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,"",-1);
}
window.onload = adjustMenu;
 
function adjustMenu()
{
	var previous = readCookie("menustatus");
	if( previous )
	{
		showhide('hideaco', previous);
	}
	var init = readCookie("menustatus2");
	if( init )
	{
		showhide('hideinit', init);
	}
}
</script>
 
 
<div class="titlewhiteTop">
	<div class="sideIndent"><span style="float:left; padding-bottom: 2px"><a href="" title=""><strong>ACO</strong></a></span> <span style="float:right"><a href="#" onclick="showhide('hideaco'); return(false);"><strong style="font-size: x-small" title="Maximize/Minimize"> +/- </strong></a></span></div>
</div>
<div class="side" id="hideaco">
	<ul class="sideMenuUL">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
</div>
 
<div class="titlewhiteTop">
	<div class="sideIndent"><span style="float:left; padding-bottom: 2px"><a href="" title=""><strong>Init</strong></a></span> <span style="float:right"><a href="#" onclick="showhide2('hideinit'); return(false);"><strong style="font-size: x-small" title="Maximize/Minimize"> +/- </strong></a></span></div>
</div>
 
<div class="side" id="hideinit">
	<ul class="sideMenuUL">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
</div>

Open in new window

0
hieloCommented:
Here you go. Please close this already!
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 
<script type="text/javascript"> 
function showhide(id,displayStatus) {
	if (document.getElementById) {
		obj = document.getElementById(id);
		if(!obj)
		{
			alert("Invalid id detected: " + id);
			return false;
		}
		if("string"===typeof(displayStatus) ){
			obj.style.display = displayStatus;
		}
		else if (obj.style.display == "none") {
			obj.style.display = "";
			createCookie(id,"",365);
		} else {
			obj.style.display = "none";
			createCookie(id,"none",365);
		}
	}
}
/*
You don't need two functions. The whole point of functions is to reuse functionality
function showhide2(id,displayStatus) {
	if (document.getElementById) {
		obj = document.getElementById('hideinit');
		if(!obj)
		{
			alert("Invalid id detected: " + id);
			return false;
		}
		if("string"===typeof(displayStatus) ){
			obj.style.display = displayStatus;
		}
		else if (obj.style.display == "none") {
			obj.style.display = "";
			createCookie("menustatus2","",365);
		} else {
			obj.style.display = "none";
			createCookie("menustatus2","none",365);
		}
	}
}*/
 
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,"",-1);
}
window.onload = adjustMenu;
 
function adjustMenu()
{
	//to add more sections, just add to this list and
	//provide the appropriate markup
	var collapsableSection = ["hideaco","hideinit","alpha"];
	
	for(var i=0, limit=collapsableSection.length; i < limit; ++i)
	{
		var previous = readCookie(collapsableSection[i]);
		if( previous )
		{
			showhide(collapsableSection[i], previous);
		}
	}
	/* You don't need to do this one by one. You can just create an array of
	all the ids that you want to track and iterate over the array to deternine
	it last status based on the cookie.
	var init = readCookie("menustatus2");
	if( init )
	{
		showhide('hideinit', init);
	}
	*/
}
</script>
 
 </head>
<body>
<div class="titlewhiteTop">
	<div class="sideIndent">
		<span style="float:left; padding-bottom: 2px">
			<a href="#" title="">
				<strong>ACO</strong>
			</a>
		</span>
		<span style="float:right">
			<a href="#" onclick="showhide('hideaco'); return(false);">
				<strong style="font-size: x-small" title="Maximize/Minimize"> +/- </strong>
			</a>
		</span>
	</div>
	<div>&#160;</div><!-- To  avoid ul list to appear below the label -->
</div>
 
<div class="side" id="hideaco">
	<ul class="sideMenuUL">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	<li>f</li>
	</ul>
</div>
<!-- This line is just to prevent overlapping of collapsed  sections -->
<div style="line-height:1px;clear:both;">&#160;</div>
 
 
<div class="titlewhiteTop">
	<div class="sideIndent">
		<span style="float:left; padding-bottom: 2px">
			<a href="" title="">
				<strong>Init</strong>
			</a>
		</span>
		<span style="float:right">
			<a href="#" onclick="showhide('hideinit'); return(false);">
				<strong style="font-size: x-small" title="Maximize/Minimize"> +/- </strong>
			</a>
		</span>
	</div>
	<div>&#160;</div><!-- To  avoid ul list to appear below the label -->
</div>
 
<div class="side" id="hideinit">
	<ul class="sideMenuUL">
	<li>g</li>
	<li>h</li>
	<li>i</li>
	<li>j</li>
	<li>k</li>
	<li>l</li>
	</ul>
</div>
<!-- This line is just to prevent overlapping of collapsed  sections -->
<div style="line-height:1px;clear:both;">&#160;</div>
 
 
<div class="titlewhiteTop">
	<div class="sideIndent">
		<span style="float:left; padding-bottom: 2px">
			<a href="" title="">
				<strong>Init</strong>
			</a>
		</span>
		<span style="float:right">
			<a href="#" onclick="showhide('alpha'); return(false);">
				<strong style="font-size: x-small" title="Maximize/Minimize"> +/- </strong>
			</a>
		</span>
	</div>
	<div>&#160;</div><!-- To  avoid ul list to appear below the label -->
</div>
 
<div class="side" id="alpha">
	<ul class="sideMenuUL">
	<li>m</li>
	<li>n</li>
	<li>o</li>
	<li>p</li>
	<li>q</li>
	<li>r</li>
	</ul>
</div>
<!-- This line is just to prevent overlapping of collapsed  sections -->
<div style="line-height:1px;clear:both;">&#160;</div>
 
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
clubzoneAuthor Commented:
perfect, thanks for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.