Expandable Outlines: The Complete Code 1/2 | WebReference

Expandable Outlines: The Complete Code 1/2

Logo

Expandable Outlines
SPECIAL EDITION; the director's cut 1/2


Internet Explorer 4

The four examples from the column are reproduced here. The first two use this function:

    function expandIt(whichEl){ whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none"; }

1. Link in the outline item head/single element (P) expansion:

    <H3> <A HREF = "javascript:expandIt(elOne)" STYLE = "text-decoration:none"> World Wide Web Consortium (W3C)</A></H3> <P ID = "elOne" STYLE = "display:none"> . . . </P>

2. onClick in the outline item head/multiple element (DIV) expansion:

    <H3 STYLE = "cursor:hand;" onClick = "expandIt(elOne)">Netscape</H3> <DIV ID = "elOne" STYLE = "display:none"> . . . </DIV>

The third and fourth examples use this function:

    function expandIt(whichEl) { whichIm = event.srcElement; if (whichEl.style.display == "none") { whichEl.style.display = ""; whichIm.src = "triUp.gif"; } else { whichEl.style.display = "none"; whichIm.src = "triDown.gif"; } }

3. Image as link in the outline item head/single element (P) expansion:

    <H3> <A HREF="javascript:expandIt(elOne)"> <IMG SRC="triDown.gif" WIDTH=16 HEIGHT=16 BORDER=0 ALT="Expand/Collapse Item"> </A> World Wide Web Consortium (W3C) </H3> <P ID="elOne" STYLE="display:none"> . . . </P>

4. Image with onClick in the outline item head/multiple element (DIV) expansion:

    <H3> <IMG SRC="triDown.gif" WIDTH=16 HEIGHT=16 BORDER=0 ALT="Expand/Collapse Item" onClick="expandIt(elTwo)" STYLE="cursor:hand"> <-- note: harms NS display Netscape </H3> <DIV ID="elTwo" STYLE="display:none"> . . . </DIV>

Netscape Navigator 4

As promised, we include the code discussed, plus the additional code necessary if you choose to hide the collapsable elements during page load. These additions/modifications are marked in blue.

Page HTML

All outline heads, expandable elements, and HTML that follows the outline are placed in DIVs, and a SCRIPT is included at page end.

<DIV ID="elOneParent"
     STYLE="position:absolute; visibility:visible">
or...STYLE="position:absolute; visibility:hidden">
    <H3>
    <A HREF="#"
       onClick="expandIt('elOne'); return false">
        <IMG NAME="imEx"
             SRC="triDown.gif" WIDTH=16 HEIGHT=16 BORDER=0
             ALT="Expand/Collapse Item">
    </A>
        World Wide Web Consortium (W3C)
    </H3>
</DIV>
<DIV ID="elOneChild"
     STYLE="position:absolute; visibility:visible">
or...STYLE="position:absolute; visibility:hidden">
.
.
.
</DIV>
    <DIV ID="elTwoParent" STYLE="position:absolute; visibility:visible"> or...STYLE="position:absolute; visibility:hidden"> <H3> <A HREF="#" onClick="expandIt('elTwo'); return false"> <IMG NAME="imEx" SRC="triDown.gif" WIDTH=16 HEIGHT=16 BORDER=0 ALT="Expand/Collapse Item"> </A> Netscape </H3> </DIV> <DIV ID="elTwoChild" STYLE="position:absolute; visibility:visible"> or...STYLE="position:absolute; visibility:hidden"> . . . </DIV>
<DIV ID="elRest1"
     STYLE="position:absolute; visibility:visible">
or...STYLE="position:absolute; visibility:hidden">
.
. remainder of page elements (part 1)
.
</DIV>
<DIV ID="elRest2"
     STYLE="position:absolute; visibility:visible">
or...STYLE="position:absolute; visibility:hidden">
.
. remainder of page elements (part 2)
.
</DIV>
.
. possibly more DIVs
.
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
    if (NS4) {
        firstEl = "elOneParent";
        firstInd = getIndex(firstEl);
        showAll();
        arrange();
    }
//-->
</SCRIPT>
</BODY>
</HTML>

The Script

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function getIndex(el) {
    ind = null;
    for (i=0; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.id == el) {
            ind = i;
            break;
        }
    }
    return ind;
}
function showAll() {
    for (i=firstInd; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        whichEl.visibility = "show";
    }
}
function arrange() {
    nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
    for (i=firstInd+1; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.visibility != "hide") {
            whichEl.pageY = nextY;
            nextY += whichEl.document.height;
        }
    }
}
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();
}
function expandIt(el) {
    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();
}
onload = initIt;
//-->
</SCRIPT>

Our cross-browser version appears on the next code page.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan. 14, 1998
Revised: Jan. 18, 1998

URL: http://www.webreference.com/dhtml/column12/allCode1.html