Making Expanding Menu Hierarchy Sensitive.

**ETpro** · 03-17-2010, 07:48 PM

I'll get to the hierarchy sensitive part next, but for now I need help making this even work with two top-level links.

I'm building a left-navigation that's expandable. Click a little + box image to the left of a top-level section's link, and all the links to sub-sections within that section expand out, the + box image becomes a - box image, and clicking the - box collapses the sub menu links. The scripts below work so long as I just have one top-level section, but because they us an ID for the +-box image, when I add a second top-level menu item, the swapImage function no longer works. How do I make it work with a class instead of an ID? The JavaScript and HTML code 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">
<head>
  <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 swapImage() {
  switch (intImage) {
   case 1:
     img1.src = "http://lib.store.yahoo.net/lib/yhst-68986320726817/menu-open.gif"
     intImage = 2
     return(false);
   case 2:
     img1.src = "http://lib.store.yahoo.net/lib/yhst-68986320726817/menu-close.gif"
     intImage = 1
     return(false);
   }
  }

  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';
          }
      }
  }
  //-->
  </script>
  <style type="text/css">
  
  .img1 {
  test-decoration: none;
  border: 0;
  margin: 3px;
  display: inline;
  vertical-align:middle;
  }
  
  .menu1{
  background-color:#ffc;
  color: #b00;
  margin-left: 5px;
  text-decoration: none;
  border: 0;
  height: 20px;
  }
  
  .submenu{
  background-color: #ff8;
  color: #b00;
  display: block;
  height: 19px;
  margin-left: 38px;
  padding-top: 2px;
  padding-left: 7px;
  }
  
  .hide{
  display: none;
  }
  
  .show{
  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;
  }
  </style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td id="menu">
      <ul>
        <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>
        </li>
          <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>
          </div>
      </ul>
    </td>
  </tr>
</table>
</body>
</html>

**tirna** · 03-17-2010, 09:18 PM

How do I make it work with a class instead of an ID?

I don't know if it is of any use to you but if you need a way of getting element objects by a class, this script will do the trick.

It returns an array of elements for a given class name.

Code:

 
function getElementsByClassName(oElm, strTagName, strClassName)
{
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++)
    {
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className))
        {
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

In the calling statement,

set oElm = document (the document object),
strTagName = tag name of the elements
strClassName = class name of the elements

You then loop through the returned array and do whatever you like to elements.

I didn't write this script. I got it off the www a few years ago but it works well.

**ETpro** · 03-20-2010, 01:56 PM

Thanks for the reply, but sleeping on it, I realized using a class would never work, because the script couldn't then know which + box was clicked. Using multiple IDs isn't working either. So it looks like the problem is more fundamental than I thought and I'm going to repost it using a more specific title to hopefully zero in onn at least the first part of it.

Thread: Making Expanding Menu Hierarchy Sensitive.

Thread Tools

Display

Making Expanding Menu Hierarchy Sensitive.

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions