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>