• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 31630
  • Last Modified:

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.
0
claracruz
Asked:
claracruz
1 Solution
 
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

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now