Avatar of claracruz
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(theid);

        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.
CSSJavaScript

Avatar of undefined
Last Comment
nimaig

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
nimaig

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23