Hierarchical Menus with the Underrated style.display Object
Subject:   Complete code
Date:   2005-06-29 01:36:22
From:   souljah
For those wanting to just rip into some working code here is mine.

It does not have the simplified hideall function included.

<body onLoad="javascript:hideAll();">

<script language="JavaScript">

var plusImg = new Image();
plusImg.src = "./imagessite/pluss.gif"
var minusImg = new Image();
minusImg.src = "./imagessite/minus.gif"

function hideLevel( _levelId, _imgId ) {
var thisLevel = document.getElementById( _levelId );
var thisImg = document.getElementById( _imgId ); = "none";
thisImg.src = plusImg.src;

function hideAll() {
hideLevel("powerboats", "powerImg");
hideLevel("sailboats", "sailImg");

function showLevel( _levelId, _imgId ) {
var thisLevel = document.getElementById( _levelId );
var thisImg = document.getElementById( _imgId );
if ( == "none") { = "block";
thisImg.src = minusImg.src;
else {
hideLevel( _levelId, _imgId);
// -->
<img id="powerImg" src="./imagessite/pluss.gif">
<table id="powerboats" border="0">
<tr><td>Boat 1</td></tr>
<tr><td>Boat 2</td></tr>
<tr><td>Boat 3</td></tr>

<img id="sailImg" src="./imagessite/pluss.gif">
<table id="sailboats" border="0">
<tr><td>Sail 1</td></tr>
<tr><td>Sail 2</td></tr>
<tr><td>Sail 3</td></tr>

Full Threads Oldest First

Showing messages 1 through 2 of 2.

  • Complete code
    2006-12-30 09:10:05  cbb2 [View]

    What else is required to make an actual menu from this code? I made a test page with this code and all it displayed was a column of text without any clickable links or heirarchical structure.

    I don't know Javascript at all, but I noticed then that there weren't any events like onclick or anything like that to make the menu actually work when the menu items are clicked. What exactly is needed to do this, and how do you add it to the code that is provided here?
  • Complete code
    2006-03-28 06:29:56  dakey [View]

    Hello, i am just playing with your script and think its great, just what i was looking for.

    There is an amendment which i have been trying to do but i don't know javascript too well and as such wondered if you would be able to help?

    instead of having a +/- image changing i wondered if i could change it so that it just says maximise/minimise instead in text?

    your help would be greatly appreciated,