Expandable Outlines: Netscape Navigator 4 (cont'd)

Expandable Outlines
Navigator 4: expanding and collapsing elements

When our page has finished loading and all our elements are correctly placed, we need to immediately hide the expandable outline elements, and reposition the visible ones. In our script, we place an onLoad event handler:

onload = initIt;
Initialization
When the init() function is called (on page load), it first moves through all the positioned elements in the page, starting with the second outline element (firstInd+1), searching for those with the string "Child" in their ID. (It would be an excellent idea to reserve "Child" for expandable element identification only.) If such an element is found, its visibility property is set to hide. (A discussion of the merits of show/hide vs visible/hidden in Navigator-only code can be found in column 10, DHTML Jigsaw Puzzle, Navigator version.
function initIt(){
    for (i=firstInd+1; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
    }
    arrange();
}
Once all our outline child elements have been hidden, arrange() is called to reposition the elements. This time through, all collapsable elements will be skipped, resulting in just the outline heads visible, positioned in order.
Expanding/Collapsing on Demand
Recall from the previous page that our call to the expandIt() function is this link:
<A HREF="#"
   onClick="expandIt('elOne'); return false">
    <IMG NAME="imEx"
         SRC="triDown.gif" WIDTH=16 HEIGHT=16 BORDER=0
         ALT="Expand/Collapse Item">
</A>
Since we are, as usual, building up to a cross-browser and backward-compatible code, the function call has been placed in the onClick handler, returning false to cancel the HREF for JavaScript browsers. We also now pass a string to expandIt(), instead of the element reference. Non-JavaScript browsers will get the dummy # value for HREF. Notice that all link images have the same NAME value, imEx.
The expandIt() function (Navigator version), first identifies the element to be manipulated by adding the document. prefix and Child suffix to the passed string. For example, elOneParent passes "elOne" to expandIt(), making whichEl equal to: document.elOneChild.
function expandIt(el) {
    if (!NS4) return;
    whichEl = eval("document." + el + "Child");
    whichIm = eval("document." + el + "Parent.document.images['imEx']");
    if (whichEl.visibility == "hide") {
        whichEl.visibility = "show";
        whichIm.src = "triUp.gif";
    }
    else {
        whichEl.visibility = "hide";
        whichIm.src = "triDown.gif";
    }
    arrange();
}
The image to be swapped is identified in a similar way, with the same prefix, and a suffix of Parent.document.images["imEx"]. In the example above,  (whichIm) would be: document.elOneParent.document.images["imEx"].
Once the element to be expanded/collapsed and the relevant image are determined, expandIt() simply toggles the values of the element's visibility property and the image's src property.
Finally, arrangeIt() is called to reposition the elements.
The complete Navigator code is repeated in our first code page.
For now, however, let's create a cross-browser version.



Produced by Peter Belesis and
 
All Rights Reserved. Legal Notices.

Created: Jan. 14, 1998

Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column12/outNStwo.html