I want to build a menu three levels deep with [+] boxes to expand a level and have the graphic for the [+] box become a [-] box while expanded. Clicking the [-] box will collapse that section of the menu and toggle back to being a [+] box.

It is supposed to look something like the attached image. That is, of course, only one top level section and one layer deep. The code below works for it. Problem is it relies on IDs of the plus-box image, so doesn't work as soon as I add a second level, or a second top-level. How can I code it so it accepts any number of control boxes at up to three-level tree structure?

This is in a Yahoo! Store. I have their proprietary query language, RTML, to work with. It only runs at publish. It spits out pure HTML pages. So I can have it write JavaScript and IDs with sequential numbering, but it doesn't serve at all during run-time. There is no runtime language there, so I must do it client side with JS.

The single layer script and HTML is below:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <title>Test Expanding Menu</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <script language="JavaScript" type="text/JavaScript">
  intImage = 2;
  function swapImage1() {
  switch (intImage) {
   case 1:
     img1.src = "http://lib.store.yahoo.net/lib/yhst-68986320726817/menu-open.gif"
     intImage = 2
   case 2:
     img1.src = "http://lib.store.yahoo.net/lib/yhst-68986320726817/menu-close.gif"
     intImage = 1

  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';
             switch_id.className = 'hide';
             menu_status[theid] = 'hide';
  <style type="text/css">
  #img1 {
  test-decoration: none;
  border: 0;
  margin: 3px;
  display: inline;
  .menu1 {
  color: #b00;
  margin-left: 5px;
  text-decoration: none;
  border: 0;
  height: 20px;
  background-color: #ff8;
  color: #b00;
  display: block;
  height: 19px;
  margin-left: 38px;
  padding-top: 2px;
  padding-left: 7px;
  display: none;
  display: block;
  #menu {
  background-color: #ffc;
  color: #b00;
  width: 200px;
  #menu ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  #menu li {
  margin: 0;
  padding: 0;
  #menu a {
  text-decoration: none;
  font-size: 12pt;
  font-weight: blod;
  color: #b00;
<table border="0" cellpadding="0" cellspacing="0">
    <td id="menu">
        <li><a href="#" onclick="showHide('mymenu1')" class="menu1">
    	  <img id="img1" name="img1" src="http://lib.store.yahoo.net/lib/yhst-68986320726817/menu-open.gif" width="14" height="14" alt="toggle menu expansion"
            onclick="swapImage();" /></a><a href="#">Section 1</a>
          <div id="mymenu1" class="hide">
            <a href="#" class="submenu">Link One here</a>
            <a href="#" class="submenu">Link Two here</a>
            <a href="#" class="submenu">Link Three here</a>
            <a href="#" class="submenu">Link Four here</a>