PDA

View Full Version : Keeping a submenu open after page reload



Brklynartist10
20 Apr 2010, 01:42 PM
Hi. I'm hoping someone can help me find a way, using javascript instead of having to go to PHP, to keep a submenu open after a submenu link has been click and opens a new page.

Here's my page: http://andybrownmedia.com/Scratch/browse.html
Right now I only have content for the first two submenu items, so they are the only ones coded. The HTML code for the list is this:

<a class="menu1" onclick="showHide('mymenu1')">ACHILLES</a>
<div id="mymenu1" class="hide">
<a href="achilles_tendonitis.html" target="_top" class="submenu">Achilles Tendonitus</a>
<a href="peroneal_tendon.html" target="_top" class="submenu">Peroneal Tendon</a>
<a href="#" class="submenu">Xanthomas of the Achilles Tendon</a>
</div>
<a class="menu1" onclick="showHide('mymenu2')">ANKLE</a>

<div id="mymenu2" class="hide">
<a href="#" class="submenu">Ankle Sprain</a>
<a href="#" class="submenu">Osteochondritis</a>
<a href="#" class="submenu">Chronic Lateral Ankle Sprain</a>
</div>
etc...


And here's my Javascript for it.

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

var last_expanded = '';

function showHide(id)
{
var obj = document.getElementById(id);

var status = obj.className;

if (status == 'hide') {

if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}

obj.className = 'show';

last_expanded = id;
} else {
obj.className = 'hide';
}
}


So what happens now is if I click the category ACHILLES then Achilles Tendon, the Achilles Tendon page loads and the menu returns to its default (collapsed). Is there a bit more code I can add to not have it return to default?

Thanks for your help!

coiner
21 Apr 2010, 08:08 PM
There are two ways you can do this:

1. Load your content into an <iframe> (http://www.w3schools.com/TAGS/tag_iframe.asp).

2. Use JavaScript/AJAX or JQuery to change the content area.