claracruz
asked on
CSS/Javascript expand/collapse menu
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.
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
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
<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
<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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.