Forum Moderators: open
I've found this elegant expandable menu on the web and tried to customize it to my wishes. It works nicely, but I'd like the menu to be collapsed when the page loads, and stay expanded after I click on an item. Now it collapses after I click on an item. Note that the links within the items point to a php switch function which in turn calls a certain include.
I suspect the collapse after an item-click happens because of onload="hideall();" in the body-tag. When i delete that part, it doesn't happen anymore, but then the menu won't be collapsed on the first pageload.
Anyone got an idea how to fix this?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Expand menu</title>
<script type="text/javascript">
function gogirl(e) {
if (document.getElementById(e).style.display == 'none') {
document.getElementById(e).style.display = 'block';
} else {
document.getElementById(e).style.display = 'none';
}
}
function hideall() {
var Nodes = document.getElementsByTagName('ul')
var max = Nodes.length
for(var i = 0;i < max;i++) {
var nodeObj = Nodes.item(i)
nodeObj.style.display = 'none';
}
}
</script>
<style type="text/css">
body {
font:11px/17px verdana;
margin: 10px;
padding: 0;
}
a {
color: #000;
text-decoration: none;
font-weight: normal;
border-bottom: dotted 1px #000;
}
a:hover {
color: #d0cc00;
text-decoration: none;
border-bottom: dotted 1px #d0cc00;
}
ul {
list-style: none;
margin :0px 0px 0px 15px;
padding-left: 5px;
border-left: 1px dotted #000;
}
h4{
font:10px verdana;
cursor: hand;
margin: 2px 0px;
padding: 2px;
color: #000;
background-color: #ffc800;
border: 1px solid #000;
font-weight : bold;
width: 84px;
}
</style>
</head>
<body onload="hideall();">
<h4 onclick="gogirl('list1')">menu 1</h4>
<ul id="list1">
<li><a href="index.php?page=1">item 1</a></li>
<li><a href="index.php?page=2">item 2</a></li>
<li><a href="index.php?page=3">item 3</a></li>
</ul>
<h4 onclick="gogirl('list2')">menu 2</h4>
<ul id="list2">
<li><a href="index.php?page=1">item 1</a></li>
<li><a href="index.php?page=2">item 2</a></li>
<li><a href="index.php?page=3">item 3</a></li>
</ul>
<h4 onclick="gogirl('list3')">menu 3</h4>
<ul id="list3">
<li><a href="index.php?page=1">item 1</a></li>
<li><a href="index.php?page=2">item 2</a></li>
<li><a href="index.php?page=3">item 3</a></li>
</ul>
</body>
</html>
Basically, you want something like this;
<body onload="hideall();gogirl('list2')">
And change 'list2' to whatever page your on.
Now you want to change this to keep any previously expanded items open, right? Well, you'll need to somehow tell the page what items to keep open. You could probably do this with a session cookie.
1. In your "gogirl" function, record the id and whether you are making the item collapsed or expanded. Put these values into a cookie.
2. In your "hideall" function, look at the value in the cookie to see which items should be expanded.
