Jump to content

Expand and Collapse


DEVILofDARKNESS

Recommended Posts

I found the following code which works fine,

except that if I click on a link and a new page is opened, the submenu's I had expanded or collapsed are all expanded again...

 

<html>
<head>
<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'>
.hide{
      display: none;
}

.show{
      display: block;
}
</style>
<link href="./css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2 class="nav"><a href="#" class="menu1" onclick="showHide('hidden1')">WWIII Stats</a></h2>
<div id='hidden1' class='hidden'>
<ul>
<li class="nav"><a href="./totaloverview.php" target="_parent">Overview</a></li>
<li class="nav">Details</li>
</ul>
</div>
<h2 class="nav"><a href="#" class="menu1" onclick="showHide('hidden2')">Nation Stats</a></h2>
<div id='hidden2' class='hidden'>
<ul>
<li class="nav"><a href="./nationoverview.php" target="_parent">Overview</a></li>
<li class="nav">ATK</li>
<li class="nav"><a href="./logout.php" target="_parent">Logout</a></li>
</ul>
</div></body></html>

Link to comment
Share on other sites

Hi,

To be able to keep the menu items open on the next page you need to "tell" the page which item was open on the previous page.

You could do this be means of setting and resetting a cookie each time the user opens a menu, however, seeing as you are using php, I would opt to add a variable to the url to indicate which menu item to open.

 

So, your links would look like this:

<li class="nav"><a href="./totaloverview.php?id_menu=hidden1" target="_parent">Overview</a></li>

where "hidden1" is the id of the parent menu item.

 

Then, within the javsacript add some php to detect this value and, if defined, automatically open that menu item.  Something like this:

<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';
        }
    }
}
<?php
if($_GET["id_menu"]!=""){
  // open this menu item
  echo showHide($_GET["id_menu"]);
}
?>
//-->
</script>

 

I haven't tested this, but I can't see any reason for it not to work.

Of course, there are other methods, but this is probably the simplest solution.

 

Chris

 

Link to comment
Share on other sites

When the page is initially opend (ie nothing has been clicked), how is the menu shown?

Are the items closed or open?

 

Clearly I don't know what is in your css stylesheet, but, by looking at the html code the submenu items have the class "hidden" which would imply that this class is hiding the elements initially.

 

So, when a link is clicked, all the items should be closed by default and then the javsascript (and php) would open only the menu item passed.

 

Chris

Link to comment
Share on other sites

Sessions could be used once the variable for the menu has been sent (ie the menu item has been clicked) but I can't really see the benefit of this.  You would still have to add the id menu item to the links for when the selected menu is changed.

 

Personally I would actually use a different, more complicated but "cleaner" method.

I would create a multidimensional array of all the menu items and their submenu items.

I would use this to "draw" the menu rather than it being hardcoded.

 

Then, on each page load I would check the url against this array to see which menu item is being shown (by checking it's herf value) and therefore "know" which item to open (as defined before).

This has the advantage of keeping the urls as they are as you wouldn't need to add any variables to the links.  The downside is that it would require a bit more programing ;)

 

Chris

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.