Expandable Outlines: Multi-Item | WebReference

Expandable Outlines: Multi-Item

Logo

Expandable Outlines
Multi-Item Expansion


There are many ways to achieve one-shot expansion or collapse of a multi-item outline. On this page, we will discuss the one that arises out of our code so far, used immediately below. We have included links for complete expansion at the beginning and the end of the outline proper. Try it:

Non-DHTML Browsers: Jump to end of outline

Expand/Collapse All Display/Hide All

Expand/Collapse Item World Wide Web Consortium (W3C)

Standards

HTML 4.0 Proposed Recommendation   New! - Important!!
https://www.w3.org/TR/PR-html40
The Biggie! Already implemented in part by 4th generation browsers, HTML 4.0 ties up the loose ends created by the browser wars, and sets the standard for the fifth browser generation.

HTML 3.2 Recommendation
https://www.w3.org/pub/WWW/TR/REC-html32.html

Cascading Style Sheets, level 1 (CSS1)
https://www.w3.org/pub/WWW/TR/PR-CSS1

Soon-to-be Standards

The Document Object Model   New!
https://www.w3.org/TR/WD-DOM/
By far the most important pending recommendation for Dynamic HTML. At last being publicly discussed and developed.

Cascading Style Sheets, level 2 (CSS2)   N e w!
https://www.w3.org/TR/WD-CSS2/
The future style sheet standard. Many features are already implemented in DHTML browsers. Expands on CSS1 and includes the following separately-developed working drafts:

Extensible Markup Language (XML): Part1. Syntax
https://www.w3.org/TR/WD-xml-lang
Do-it-yourself mark up. Then what will the W3C do?

Expand/Collapse Item Netscape

Dynamic HTML documentation   Updated!
https://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm
Recently updated for Communicator final release with better CSS documentation and examples. An invaluable reference for developers, the complete documentation can be viewed online, or downloaded as:

Expand/Collapse Item Microsoft

Dynamic HTML documentation
https://www.microsoft.com/sitebuilder/workshop/author/dhtml/
a.k.a Anything you can do, I can do better.

Internet Client SDK   Invaluable!
https://www.microsoft.com/msdn/sdk/inetsdk/help/
The Complete Reference for Internet Explorer. Dynamic HTML section superior to Microsoft's own DHTML docs, above.

Microsoft - Final Release Notes   New!
https://www.microsoft.com/workshop/prog/ie4/new/

If you have a low-resolution monitor or just plain want to break out of Microsoft's ridiculous multi-framed navigation, go directly to...

Expand/Collapse Item Scripting

JavaScript, The Complete Reference   Updated! - Must Have!!
https://developer.netscape.com/library/documentation/communicator/jsref/index.htm
Finally available, the comprehensive documentation for JavaScript, both client and server. Includes the JavaScript 1.2 addendum. The new JavaScript Bible. Can be viewed online, or downloaded as:

JavaScript Guide   New!
https://developer.netscape.com/library/documentation/communicator/jsguide4/index.htm
Describes the core JavaScript language, including JavaScript 1.2 features. Serves as a quick reference to JavaScript structure. Full description of properties and methods, however, only in The JavaScript Reference. Can be viewed online, or downloaded as:

JavaScript 1.2 Addendum   Updated!
https://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm
Puts the Dynamic in Netscape's Dynamic HTML. Now also available as part of The JavaScript Reference. Can be viewed online, or downloaded as:

ECMAscript
https://www.ecma.ch/STAND/Ecma-262.htm
The new international web scripting language standard based on JavaScript 1.1, recently ratified by ECMA, now available for downloading, in
self-expanding MS WORD or Acrobat PDF format.
You read it here first: ECMA stands for European Computer Manufacturers Association

Microsoft Scripting   New!
https://www.microsoft.com/scripting/
Microsoft's new home page for all its scripting docs, articles and links.

JScript   Updated!
https://www.microsoft.com/jscript/
Complete Reference for JScript 3 for IE4.

    What's New in JScript 3.0   New!
    https://www.microsoft.com/workshop/prog/ie4/jscript3.htm
    Answers the question "How compatible is JScript 3 with JavaScript 1.2?"

VBScript
https://www.microsoft.com/vbscript/
The 8-track tape of scripting.

Expand/Collapse Item PNG (Portable Network Graphics) Image Format

W3C PNG Recommendation
https://www.w3.org/pub/WWW/TR/REC-png.html

The Official PNG Home Page
https://www.wco.com/~png/png.html

Plug-in for Netscape Navigator
https://codelab.siegelgale.com/solutions/png_index.html

Expand/Collapse Item Implementation Issues (bugs or limitations)

Netscape JavaScript Bugs   Updated for Communicator!
https://developer.netscape.com/library/javascript/faqs/buglist/js-known-bugs.html

Communicator CSS1 Known Issues
https://developer.netscape.com/support/bugs/known/css.html

Expand/Collapse Item Further Reading

There's no place like home

Doc JavaScript
https://www.webreference.com/js/
Bi-weekly prescriptions for all your JavaScript ailments.

Cascading Style Sheets
https://www.webreference.com/dev/style/
An Introduction to CSS

Style Sheet Syntax
https://www.webreference.com/dev/style/syntax.html
Excert from the upcoming book HTML Web Publishing SECRETS from IDG Books

Cascading Style Sheets: Designing for the Web
https://www.webreference.com/content/css/
Excerpts and a full chapter from the book by Hakon Lee and Bert Bos of the W3C.

The Evolution of Style Sheets
https://www.webreference.com/dev/style/evolution.html
A history of CSS and future directions.

Other Developer Sites

IE Help   New!
https://www.iehelp.com/
Compuserve's new Explorer-related megasite.

    Dynamic HTML in IE   New!
    https://www.iehelp.com/iehelp/solutions/
    Weekly IE-related DHTML techniques by yours truly.

Netscape Help   New!
https://www.netscapehelp.com/
Compuserve's new Netscape-related megasite.

BrowserWars.com   New!
https://www.browserwars.com/
Compuserve's new megasite devoted solely to coverage of browser development.

DHTML Dude   New!
https://www.microsoft.com/sitebuilder/columnists/default.asp
Microsoft's own regular DHTML column with a name I wish I had thought of.

Builder.com
https://www.builder.com/
C|NET's site for web developers. Regular SuperScripter column, and longer in-depth occasional articles.

Inside DHTML
https://www.insidedhtml.com/
Scott Isaacs' comprehensive source of Dynamic HTML information and techniques. Focus on IE4. MSIE4 absolute must!

Dynamic HTML Zone
https://www.dhtmlzone.com/
Macromedia's ambitious new Dynamic HTML mega-site with articles, tutorials, and discussion group.

Web Review
https://www.webreview.com/
Regular Dynamic HTML articles, particularly in bi-weekly Web Coder column by Nick Heinle of WebReference's JavaScript Tip of the Week

WebCoder
https://webcoder.com/
Nick Heinle's all-encompassing site on DHTML and JavaScript.

NetscapeWorld
https://www.netscapeworld.com/
Monthly articles, strong in JavaScript, some DHTML. Undergoing major re-construction. Stay tuned.

WebMonkey
https://www.webmonkey.com/
Regular coding columns, but their Wired layout needs deciphering.

Expand/Collapse All Display/Hide All

The first Display/Hide All belongs to the regular HTML flow and is not enclosed in a positioned element. To get an indent in the outline proper, we added a BLOCKQUOTE, but this is a subjective formatting decision. The necessary HTML defines the first link and the last:

    <P>
<A HREF="#"
   onClick="expandAll(); return false">
    <IMG NAME="imEx" SRC="triDown.gif"
         WIDTH=16 HEIGHT=16 BORDER=0
         ALT="Expand/Collapse All">
</A>
    Display/Hide All
</P>
...outline start...
    ...outline end...
<DIV ID="elEndParent" CLASS="parent">
<A HREF="#"
   onClick="expandAll(); return false">
    <IMG NAME="imEx" SRC="triDown.gif"
         WIDTH=16 HEIGHT=16 BORDER=0
         ALT="Expand/Collapse All">
</A>
    Display/Hide All
</DIV>
The second Display/Hide All is enclosed in a DIV, like all HTML that follows the outline. It has the "Parent" string in its ID, because like all parents, it has an image that needs to be toggled.


In our script, we initialize a global variable to track the state of the complete outline. The two full display links are toggles. The first time they are clicked they expand the outline, the next they collapse it, and so on, depending on the value of isExpanded.


    isExpanded = false;
Both top and bottom links call the only new function needed, expandAll(), which establishes which image file is to be loaded for the swap, executes browser-specific code, and finally toggles the value of isExpanded.


function expandAll() {
    newSrc = (isExpanded) ? "triDown.gif" : "triUp.gif";
    if (NS4) {
        document.images["imEx"].src = newSrc;
        for (i=firstInd; i<document.layers.length; i++) {
            whichEl = document.layers[i];
            if (whichEl.id.indexOf("Parent") != -1) {
                whichEl.document.images["imEx"].src = newSrc;
            }
            if (whichEl.id.indexOf("Child") != -1) {
                whichEl.visibility = (isExpanded) ? "hide" : "show";
            }
        }
        arrange();
        if (isExpanded) scrollTo(0,document.layers[firstInd].pageY);
    }
    else {
        divColl = document.all.tags("DIV");
        for (i=0; i<divColl.length; i++) {
            if (divColl(i).className == "child") {
                divColl(i).style.display = (isExpanded) ? "none" : "block";
            }
        }
        imColl = document.images.item("imEx");
        for (i=0; i<imColl.length; i++) {
            imColl(i).src = newSrc;
        }
    }
    
    isExpanded = !isExpanded;
}


Full Display/Collapse in Navigator


For Navigator, expandAll() first swaps the image in our first full display link. Since it is not enclosed in a DIV, the top-level document's image array is used.


Next, we go through all positioned elements, starting with the first outline element (firstInd), and we establish whether it is an outline parent element. If it is, we swap the image it contains. The last full display link was identified as a parent, remember, so it has its image swapped as well. If it is not a parent, it may be a child element. If it is, we toggle its visibility depending on the value of isExpanded. If the element is neither a parent or child, no action is taken.


If our outline is in a collapsed state, (isExpanded is false), all child elements will become visible, and vice-versa. We then call arrange() to reposition the elements.


If the second full display link is clicked, and the outline is fully expanded, a collapse of a long outline may leave the user with a screen display of the page end, which could very well be blank. As a courtesy, after a collapse, we scroll the page to the first outline parent, using the scrollTo() method, which takes two arguments: the x and the y co-ordinates of the new position:


    if (isExpanded) scrollTo(0,document.layers[firstInd].pageY);
Full Display/Collapse in Explorer


We need to perform only two tasks: toggle the display value of all child elements and swap the images in all parents.


The first is accomplished in the same way that initialization was performed, by creating a new collection of DIVs and checking their className.


The second poses a problem: since all images to be swapped have the same NAME, how do we reference them? In Navigator this is not a problem since no two images were in the same element, and the proprietary document object of each element caused all images to have a unique identifier, that is, document.images["imEx"], document.elOneParent.document.images["imEx"], document.elTwoParent.document.images["imEx"], and so on.


Explorer provides a simple solution. We just use the item() method of the document.images array.


newCollection = document.images.item(index or name/idString,sub-index)


Similar to the tags() method, discussed earlier, item() returns a new collection by applying the arguments as filters of another collection or array. The following collections/arrays can have the item() method:


    all        embeds    links
anchors    filters   options
applets    forms     plugins
areas      frames    rows
cells      images    scripts
elements   imports   styleSheets
The first argument is mandatory and can be either an integer or a string. If an integer, item() regards it as an index of the collection/array and returns the element at that position. If a string is provided, item() returns a collection of elements that have the string as their ID or NAME. This new collection can be further filtered by the second argument, an integer, specifying the index of the required element in this new collection. For example:


    thirdGuy = document.all.item(2);
    thirdGuy     is the third element in the page.
    imColl = document.images("imEx");

    imColl     is a collection of all images with a NAME/ID of imEx.
    secondEx = document.images("imEx",1);
    secondEx     is the second image on the page with a NAME/ID of imEx.
    In our outline, this would be the image in elOneParent.
Now, where were we? Oh yes, we want to swap all the images with a NAME of imEx in Explorer. Using item(), we create a new collection of all imEx images, then move through the collection, changing their src's


    imColl = document.images.item("imEx");
for (i=0; i<imColl.length; i++) {
    imColl(i).src = newSrc;
}
Further Enhancements


A more elegant method for full expansion/collapse would be to track the expanded elements, in case they have all been expanded or collapsed independently. The behaviour of the full display links would depend on this state. Presently, the first click expands all elements, even if they have already been expanded one by one.


The code discussed on this page has been incorporated into the cross-browser code and appears on our final page.

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/outALLone.html