How to keep accordion drop-down menu open when opening a new page?

JavaScript
26

Hi ,

i have used the html and script provided by @ScallioXTX

and modified it little bit , so that the accordion menu remains active even after page load

here is the complete code , in case some one needs it.

style.css



.cssmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  width:220px;
  font-size:14px;
  font-weight:bold;
  float:left;
}
.cssmenu li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
}
.cssmenu a {
  background: #909090;
  border-bottom: 1px solid #eaeaea;
  color: #fff;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
  border-radius: 3px;

}
.cssmenu a:hover {
  color: #000;
  padding-bottom: 8px;
  background-color:#c7e9ff;
}


.cssmenu ul li span{ display: block;
	padding: 8px 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #f7931e;
	margin:2px 0px;
	width:201px;
	cursor:pointer;
	color:#FFF;
	
}

accordion.js


$(document).ready( function() {
				
				// initialize accordion
				$('#Accordion ul').each( function() {
					var currentURI = window.location.href;
					var links = $('a', this);
					var collapse = true;
					for (var i = 0; i < links.size(); i++) {
						var elem = links.eq(i);
						var href = elem.attr('href');
						var hrefLength = href.length;
						var compareTo = currentURI.substr(-1*hrefLength);
						
						if (href == compareTo) {
							collapse = false;
							$(elem).css({ 'background-color': '#c7e9ff', 'color': '#000' });
							break;
						}
					};
					if (collapse) {
						$(this).hide();
						
					}
				});
				
				
				$("#Accordion").delegate('span', 'click', function() {
					var ul = $(this).next('ul');
					if (ul.is(':visible')) {
						ul.slideUp(500);
					} else {
						$('#Accordion ul').not(ul).slideUp(500);
						ul.slideDown(500);
					}
				});
			});

Sidemenu.html


<!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" />
    <link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<title>Untitled Document</title>

</head>

<body>

        <div class="cssmenu">
       <ul id="Accordion">
		<li>
			<span>Profile</span>
			<ul>
				<li><a href="Sidemenu.html">BaseProfile</a></li>
				<li><a href="one.html">Billing Address</a></li>
				
			</ul>
		</li>
		<li>
			<span>Services</span>
			<ul>
				<li><a href="Sidemenu_one.html">Shipping Address</a></li>
				<li><a href="two.html">Billing Address</a></li>
			</ul>
		</li>
		
		
	</ul>

       </div>

</body>
</html>

Sidemenu_one.html


<!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" />
    <link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<title>Untitled Document</title>

</head>

<body>

        <div class="cssmenu">
       <ul id="Accordion">
		<li>
			<span>Profile</span>
			<ul>
				<li><a href="Sidemenu.html">BaseProfile</a></li>
				<li><a href="one.html">Billing Address</a></li>
				
			</ul>
		</li>
		<li>
			<span>Services</span>
			<ul>
				<li><a href="Sidemenu_one.html">Shipping Address</a></li>
				<li><a href="two.html">Billing Address</a></li>
			</ul>
		</li>
		
		
	</ul>

       </div>

</body>
</html>