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