How to make a collapsible sub-menu stay open?

Hello everyone.

I am struggling with a little problem with a collapsible menu I am working with.

You can see the menu here:
http://www.divine-dsign.com/VinnuverndSida/index.php

Now I need the links (the dd's) that fold out to stay open once you click its header (dt's). For example if you try clicking the redbutton where it says HEILSUVERND (the same site opens but will be an under site in time) that sub-menu should stay open for the page that opens.

Can I do this??

This is my menu javascript:


function show(thisDT){
var thisDD=thisDT.nextSibling;
while(thisDD.nodeName!='DD'){
thisDD=thisDD.nextSibling;
}
var allDD=thisDD.parentNode.getElementsByTagName('dd'), i=0, dd;
while(dd=allDD[i++]){
dd.style.display=dd==thisDD?'block':'none';
}
}


and this is my html:

<div id="menuBox">
<dl id="menu">
<dt><a href="#" style="color:#FFFFFF">Um Vinnuvernd</a></dt>
<dt onclick="show(this);"><a href="heilsuvernd.php" class="style1" id="menuImg" style="color:#FFFFFF">Heilsuvernd</a></dt>
<dd>
<ul>
<li><a href="#">sub-menu 2.1</a></li>
<li><a href="#">sub-menu 2.2</a></li>
<li><a href="#">sub-menu 2.3</a></li>
</ul>
</dd>
<dt onclick="show(this);return false"><a href="#" id="menuImg2" style="color:#FFFFFF">Vinnuvernd</a></dt>
<dd>
<ul>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
</ul>
</dd>
<dt onclick="show(this);return false"><a href="#" id="menuImg3" style="color:#FFFFFF">Heilsuefling</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd>
<dt onclick="show(this);return false"><a href="#" style="color:#FFFFFF">Einstaklingar</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd>
<dt onclick="show(this);return false"><a href="#" style="color:#FFFFFF">English version</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd></dl>
<dl id="menu2">
<dt onclick="show(this);return false"><a href="#"></a></dt>
<dd>
<ul>
<li><a href="http://www.ferdavernd.is" target="_blank">ferdavernd.is</a></li>
<li><a href="#">s.535-7700</a></li>
</ul>
</dd>
</dl>


Can anyone help with this?
All the best,
Figurine

I use a similar expanding script in a couple of places - let me dig it out and see if I can adapt it to your cause ;)

Here we go:


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';
}
}
}


To get it to work it'll require a slight recoding, namely my script runs off element Id's

you also need to define two css classes:


.show { display: block; }
.hide {display: none; }


try a restructure like this:



<dt onclick="showhide(sub_menu_1);"><a href="heilsuvernd.php" class="style1" id="menuImg" style="color:#FFFFFF">Heilsuvernd</a></dt>

<dd id="sub_menu_1">
<ul>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
</ul>
</dd>


let me know how you fare!

that was fast! Thanks.

The code seems logical to me but I can't seem to make it work.

I've put it up on these sites:
http://divine-dsign.com/VinnuverndSida/heilsuvernd.php and
http://divine-dsign.com/VinnuverndSida/vinnuvernd.php (so I can click from Vinnuvernd to Heilsuvernd...and see if it stays open :)

But now it doesn't open at all...I must be doing something wrong.

I saved the javascript like this



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';
}
}
}

function show(thisDT){
var thisDD=thisDT.nextSibling;
while(thisDD.nodeName!='DD'){
thisDD=thisDD.nextSibling;
}
var allDD=thisDD.parentNode.getElementsByTagName('dd'), i=0, dd;
while(dd=allDD[i++]){
dd.style.display=dd==thisDD?'block':'none';
}
}

so that the rest of the links work. I also tried doing it with only your code but it's still the same.

Any ideas what I might be doing wrong?

What about some kind of an onLoad stay open function do you think something like that would work?

Best,
Figurine

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<link href="http://www.divine-dsign.com/VinnuverndSida/AllVinnuStyle.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">
<!--
function show(thisDT){
var thisDD=thisDT.nextSibling;
while(thisDD.nodeName!='DD'){
thisDD=thisDD.nextSibling;
}
var allDD=thisDD.parentNode.getElementsByTagName('dd'), i=0, dd;
while(dd=allDD[i++]){
dd.style.display=dd==thisDD?'block':'none';
}
}
//-->
</script>
</head>
<body onload="show(document.getElementById('menu').getElementsByTagName('DT')[1])">
<div id="menuBox">
<dl id="menu">
<dt><a href="#" style="color:#FFFFFF">Um Vinnuvernd</a></dt>
<dt onclick="show(this);"><a href="heilsuvernd.php" class="style1" id="menuImg" style="color:#FFFFFF">Heilsuvernd</a></dt>
<dd>
<ul>
<li><a href="#">sub-menu 2.1</a></li>
<li><a href="#">sub-menu 2.2</a></li>
<li><a href="#">sub-menu 2.3</a></li>
</ul>
</dd>
<dt onclick="show(this);return false"><a href="#" id="menuImg2" style="color:#FFFFFF">Vinnuvernd</a></dt>
<dd>
<ul>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
<li><a href="#">sub-menu 3.1</a></li>
</ul>
</dd>
<dt onclick="show(this);return false"><a href="#" id="menuImg3" style="color:#FFFFFF">Heilsuefling</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd>
<dt onclick="show(this);return false"><a href="#" style="color:#FFFFFF">Einstaklingar</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd>
<dt onclick="show(this);return false"><a href="#" style="color:#FFFFFF">English version</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">sub-menu 4.1</a></li>
<li><a href="#">sub-menu 4.2</a></li>
<li><a href="#">sub-menu 4.3</a></li>
</ul>
</dd></dl>
<dl id="menu2">
<dt onclick="show(this);return false"><a href="#"></a></dt>
<dd>
<ul>
<li><a href="http://www.ferdavernd.is" target="_blank">ferdavernd.is</a></li>
<li><a href="#">s.535-7700</a></li>
</ul>
</dd>
</dl>
<body>

</body>

</html>

I didn't realise you wanted it to persist accross pages, sorry.

I think an onLoad may indeed be the way forward,

my code basically generates an array of the names of all the menu items currently expanded - you can loop through that array to have the state persist, somthing like:


function menuPersist()
{
var i = 0;
while (i <= menu_status.length)
{
if(document.getElementById(menu_status[i])
{
document.getElementById(menu_status[i]).class = "show";
}
i++;
}
}


so you write all your elements out with class="hide", and then call menuPersist onLoad.

As for transfering the state, I'd be temped to use php over javascript - either pass the contents of menu_state in the URL and use $_GET[] or define the array as a session variable or session cookie...

I tried vwphillips suggestion and it works like a charm!

Really appreciate your help guys!
THANKS ***

Figurine

Aye - very neat vwPhillips :)

I have a simpler version if you're going to just use the onclick event handler:

function showHide(el_id){
curr = document.getElementById(el_id).style;
document.getElementById(el_id).style = (curr == 'block'?'none':'block');
}

I find it to be simpler and you may be able to modify it with some of vwphillips' code to avoid the id's this would be put into action the same as vwphillips':

function showHide(thisDT){
var curr = thisDT.nextSibling;
thisDT.nextSibling.style = (curr.style == 'block'?'none':'block');
}