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.
LVL 4
claracruzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nimaigCommented:
If you don't mide using cookies, you can try out the code below
============================================
<!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';
           set_cookie(theid,'hide');
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
           set_cookie(theid,'show');
        }
    }
}

function showHideAll()
{
      var menuState = get_cookie ('mymenu1');
      menu_status['mymenu1']=menuState;
      showHide('mymenu1');

      menuState = get_cookie ('mymenu2');
      menu_status['mymenu2']=menuState;
      showHide('mymenu2');
}



function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( cookie_name + '=(.*?)(;|$)' );


  if ( results )
    return ( unescape ( results[1] ) );
  else
    return null;
}

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
        cookie_string += "; path=" + escape ( path );

  if ( domain )
        cookie_string += "; domain=" + escape ( domain );

  if ( secure )
        cookie_string += "; secure";

  document.cookie = cookie_string;
}

//-->
</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 onload="javascript:showHideAll()">
<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>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.