1) Script Title: Switch Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...switchmenu.htm

3) Describe problem: Have been using the Switch Menu script for three years now with excellent results. In my past applications I had the persistence feature activated sitewide. I currently have a new application in which I would like to have the persistence active locally. When I test it though the persistence only takes affect after I have selected a submenu item for the second time. For example, the first time I select a submenu item it directs me to the linked page but the menu collapses. I reopen the menu and select the same submenu item and the tree correctly stays open. My applicable code is below. Unfortunately, I cannot post a URL of the example since the application is within a electronic catalog which is installed into a kitchen and bath design program called 20-20 Design. Any assistance would be greatly appreciated.


HTML Code:
<style type="text/css">
.menutitle{
	cursor:pointer;
	margin-bottom: 5px;
	background-color:#9F9FA6;
	color:#000000;
	width:170px;
	padding:2px;
	text-align:center;
	font-weight:bold;
	/*/*/border:2px solid #000000;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
}
.submenu{
	margin-bottom: 0.5em;
	color: #040006;
	font-size: 10px;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
<style type="text/css">
<!--
body {
	background-color: #FFFFFF;
	margin-top: 0px;
}
.style2 {color: #700072}
a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
-->
</style>
</head>

<body>
<!-- Keep all menus within masterdiv-->
<table width="746" border="0" cellpadding="4">
  <tr>
  <td width="170" valign="top">
<div id="masterdiv">

	<div class="menutitle" onclick="SwitchMenu('sub1')">Silver Toned Finish </div>
	<span class="submenu" id="sub1">
		- <a href="hardware_pages/aged_pewter_826.html" target="main">Aged Pewter</a><br>
 		- <a href="hardware_pages/anodized_aluminum_826.html" target="main">Anodized Aluminum</a><br>
 		- <a href="hardware_pages/antique_nickel_826.html" target="main">Antique Nickel</a><br>
		- <a href="hardware_pages/matt_nickel_826.html" target="main">Matt Nickel</a><br>
		- <a href="hardware_pages/pewter_826.html" target="main">Pewter</a><br>
 		- <a href="hardware_pages/polished_chrome_826.html" target="main">Polished Chrome</a><br>
		- <a href="hardware_pages/polished_nickel_826.html" target="main">Polished Nickel</a><br>
 		- <a href="hardware_pages/satin_nickel_826.html" target="main">Satin Nickel</a><br>
 		- <a href="hardware_pages/sterling_nickel_826.html" target="main">Sterling Nickel</a><br>
		- <a href="hardware_pages/stainless_steel_826.html" target="main">Stainless Steel</a><br>
		- <a href="hardware_pages/weathered_nickel_826.html" target="main">Weathered Nickel</a><br>
		- <a href="hardware_pages/weathered_nickel_copper_826.html" target="main">Weathered Nickel Copper</a><br>
	</span>

	<div class="menutitle" onclick="SwitchMenu('sub2')">Gold Toned Finish </div>
	<span class="submenu" id="sub2">
 		- <a href="hardware_pages/burnished_brass_826.html" target="main">Burnished Brass</a><br>
 		- <a href="hardware_pages/distressed_brass_826.html" target="main">Distressed Brass</a><br>
		- <a href="hardware_pages/guilded_bronze_826.html" target="main">Guilded Bronze</a><br>
		- <a href="hardware_pages/rustic_bronze_826.html" target="main">Rustic Bronze</a><br>
	</span>
	
	<div class="menutitle" onclick="SwitchMenu('sub3')">Dark Toned Finish </div>
	<span class="submenu" id="sub3">
		- <a href="hardware_pages/antique_rust_826.html" target="main">Antique Rust</a><br>
		- <a href="hardware_pages/black_bronze_826.html" target="main">Black Bronze</a><br>
 		- <a href="hardware_pages/dark_oiled_bronze_826.html" target="main">Dark Oiled Bronze</a><br>
		- <a href="hardware_pages/flat_black_826.html" target="main">Flat Black</a><br>
		- <a href="hardware_pages/graphite_826.html" target="main">Graphite</a><br>
		- <a href="hardware_pages/oil_rubbed_bronze_826.html" target="main">Oil Rubbed Bronze</a><br>
		- <a href="hardware_pages/roman_bronze_826.html" target="main">Roman Bronze</a><br>
		- <a href="hardware_pages/wrought_iron_826.html" target="main">Wrought Iron</a><br>
	</span>

	<div class="menutitle" onclick="SwitchMenu('sub4')">Miscellaneous</div>
	<span class="submenu" id="sub4">
		- <a href="hardware_pages/acrylic_826.html" target="main">Acrylic</a><br>
		- <a href="hardware_pages/frosted_acrylic_826.html" target="main">Frosted Acrylic</a><br>
		- <a href="hardware_pages/wood_826.html" target="main">Wood</a><br>
	</span>	</div>  </td>
	
  <td width="500" align="center" valign="baseline"><img src="Innermost-Splash-Hardware.jpg" width="500" height="500" /></td>
  </tr>
</table>