Keeping a submenu open after page reload

JavaScript
1

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>
          <a class="menu1" onclick="showHide('mymenu3')">ARCH &amp; BALL</a>

            <div id="mymenu3" class="hide">
              <a href="#" class="submenu">Flat Feet</a>
              <a href="#" class="submenu">Metatarsalgia</a>
              <a href="#" class="submenu">Plantar Fibromas</a>
              <a href="#" class="submenu">Sesamoiditis</a>
            </div>
          <a class="menu1" onclick="showHide('mymenu4')">COMMON INJURIES</a>

            <div id="mymenu4" class="hide">
              <a href="#" class="submenu">Broken Ankle</a>
              <a href="#" class="submenu">Stress Fracture</a>
              <a href="#" class="submenu">Osteochondromas</a>
              <a href="#" class="submenu">Shin Splints</a>
            </div>
          <a class="menu1" onclick="showHide('mymenu5')">DEFORMITIES</a>

            <div id="mymenu5" class="hide">
              <a href="#" class="submenu">Amniotic Band Syndrome</a>
              <a href="#" class="submenu">Bunions</a>
              <a href="#" class="submenu">Claw Toe</a>
              <a href="#" class="submenu">Club Foot</a>
            </div>
          <a class="menu1" onclick="showHide('mymenu6')">ACHILLES</a>

            <div id="mymenu6" class="hide">
              <a href="#" class="submenu">Achilles Tendonitus</a>
              <a href="#" class="submenu">Peroneal Tendon</a>
              <a href="#" class="submenu">Xanthomas of the Achilles Tendon</a>
              </div>
          <a class="menu1" onclick="showHide('mymenu7')">ANKLE</a>
            <div id="mymenu7" 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>
          <a class="menu1" onclick="showHide('mymenu8')">ARCH &amp; BALL</a>
            <div id="mymenu8" class="hide">

              <a href="#" class="submenu">Flat Feet</a>
              <a href="#" class="submenu">Metatarsalgia</a>
              <a href="#" class="submenu">Plantar Fibromas</a>
              <a href="#" class="submenu">Sesamoiditis</a>
            </div>
          <a class="menu1" onclick="showHide('mymenu9')">COMMON INJURIES</a>

            <div id="mymenu9" class="hide">
              <a href="#" class="submenu">Broken Ankle</a>
              <a href="#" class="submenu">Stress Fracture</a>
              <a href="#" class="submenu">Osteochondromas</a>
              <a href="#" class="submenu">Shin Splints</a>
            </div>
          <a class="menu1" onclick="showHide('mymenu10')">DEFORMITIES</a>

            <div id="mymenu10" class="hide">
              <a href="#" class="submenu">Amniotic Band Syndrome</a>
              <a href="#" class="submenu">Bunions</a>
              <a href="#" class="submenu">Claw Toe</a>
              <a href="#" class="submenu">Club Foot</a>

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!

–