Hello experts,
I have a javascript/css combination that does an expand/collapse vertical menu for me as follows;-
<!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"
xml:lang="en" lang="en">
<head>
<title>Vertical expanding menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();
function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(th
eid);
if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}
//-->
</script>
<style type="text/css">
.menu1{
background-color:#666666;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:solid 1px #000000;
}
.submenu{
background-color:#CCCCCC;
display: block;
height: 19px;
padding-top: 2px;
padding-left: 37px;
color: #333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
border-top:solid 1px #000000;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div style="width:183px;">
<a class="menu1" onclick="showHide('mymenu1
')">Menu 1</a>
<div id="mymenu1" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu2
')">Menu 2 </a>
<div id="mymenu2" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
</div>
</body>
</html>
The problem is that once I click the link and go onto a new page, the expanded menus are closed again, how do I ensure that the expanded sub-menu stay open on the next page.
Please show sample code with answer if possible thank you.
Start Free Trial
