<HTML> <HEAD> <TITLE>Outline</TITLE> <META NAME="FILENAME" CONTENT="outline_JS.HTM"> <STYLE> A:link { color:#003399; text-decoration:none; } A:visited { color:#6699CC; text-decoration:none; } A:hover { text-decoration:underline; } </STYLE> </HEAD> <BODY TOPMARGIN=20 LEFTMARGIN=40 BGCOLOR="#FFFFFF" LINK="#000066" VLINK="#666666" TEXT="#000000"> <!--TOOLBAR_START--> <!--TOOLBAR_EXEMPT--> <!--TOOLBAR_END--> <H2> </H2> <P> <FONT FACE="Verdana, Arial, Helvetica" SIZE="4"><B>Use the mouse to expand the outline!</B></FONT> <BR><BR> <DIV ID="Out0"> <IMG SRC="images/folder.gif" ID="Out1" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Item 1<BR> <DIV ID="Out1d" STYLE="display:None"> <IMG SRC="images/folder.gif" ID="Out2" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Item 1.1<BR> <DIV ID="Out2d" STYLE="display:None"> <IMG SRC="images/60-60-60.gif" WIDTH="20" HEIGHT="15"> Item 1.1.1<BR> <IMG SRC="images/60-60-60.gif" WIDTH="20" HEIGHT="15"> Item 1.1.2<BR> </DIV> <IMG SRC="images/60-60-60.gif" WIDTH="20" HEIGHT="15"> Item 1.2<BR> </DIV> <IMG SRC="images/60-60-60.gif" WIDTH="20" HEIGHT="15"> Item 2<BR> </DIV> <SCRIPT LANGUAGE="JavaScript"> function clickHandler() { var targetId, srcElement, targetElement; srcElement = window.event.srcElement; if (srcElement.className == "Outline") { targetId = srcElement.id + "d"; targetElement = document.all(targetId); if (targetElement.style.display == "none") { targetElement.style.display = ""; srcElement.src = "images/ofolder.gif"; } else { targetElement.style.display = "none"; srcElement.src = "images/folder.gif"; } } } document.onclick = clickHandler; </SCRIPT> <HR> <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"> <TR> <TD ALIGN="LEFT" VALIGN="TOP" COLSPAN="2"><FONT FACE="Verdana, Arial, Helvetica" SIZE="2"><B>Description</B></FONT></TD> </TR> <TR> <TD ALIGN="LEFT" VALIGN="TOP" COLSPAN="2"><FONT FACE="Verdana, Arial, Helvetica" SIZE="2">This example shows how to build an interactive outline that expands and collapses. Click closed folders to open them, and click open folders to close them. The items automatically expand and collapse.</FONT> <P> <FONT FACE="Verdana, Arial, Helvetica" SIZE="2"> No matter how many items you would like to include in your outline, or what those items contain, the code to collapse and expand items never has to change. A simple naming convention is used to allow this. In the example above, all of the images that are used to control the collapsing and expanding of elements are given the class "Outline." The element that will be hidden or shown when its associated image is clicked has a name consisting of the ID of its associated images, followed by a "d," for example, if the Image ID is "image 1," the outline element would have an ID of "image1d." So, when a click occurs, the code checks to see if the source of the click is an object with class = Outline and, if so, it gets the element that has an ID equal to the clicked image's ID+"d." That element's display status is then toggled. </FONT></P> </TD> </TR> <TR> <TD ALIGN="LEFT" VALIGN="TOP" COLSPAN="2"><P><FONT FACE="Verdana, Arial, Helvetica" SIZE="2"><BR><B>Usage</B></FONT></TD> </TR> <TR> <TD ALIGN="LEFT" VALIGN="TOP" COLSPAN="2"><FONT FACE="Verdana, Arial, Helvetica" SIZE="2">As explained above, the code to control the outline does not have to change based on the contents of the outline. Simply take the script from this page, use the naming convention described above, and you will have instant outlines.</FONT></TD> </TR> </TABLE> <P> <P> <P> </BODY> </HTML>