Brklynartist10
20 Apr 2010, 02: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!
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!