Expandable Outlines | WebReference

Expandable Outlines

Logo

Expandable Outlines
creating expandable/collapsable outlines in both browsers


This tutorial can be appreciated by users of any browser, any version. The in-line examples will work only in Netscape Navigator 4 or Internet Explorer 4, Release.
This technique was developed after a suggestion by Anders Lund.

Those of you who visit our links page regularly will be pleased to know that we've minimized the scrolling needed to browse the link list, by presenting the page in an expandable/collapsable outline format for DHTML browers.

In fact, the whole list is reproduced here. Click on the triangle images to expand and collapse the individual headings or even the complete list:

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!!
http://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
http://www.w3.org/pub/WWW/TR/REC-html32.html

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

Soon-to-be Standards

The Document Object Model   New!
http://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!
http://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
http://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!
http://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
http://www.microsoft.com/sitebuilder/workshop/author/dhtml/
a.k.a Anything you can do, I can do better.

Internet Client SDK   Invaluable!
http://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!
http://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!!
http://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!
http://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!
http://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
http://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!
http://www.microsoft.com/scripting/
Microsoft's new home page for all its scripting docs, articles and links.

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

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

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

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

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

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

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

Expand/Collapse Item Implementation Issues (bugs or limitations)

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

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

Expand/Collapse Item Further Reading

There's no place like home

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

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

Style Sheet Syntax
http://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
http://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
http://www.webreference.com/dev/style/evolution.html
A history of CSS and future directions.

Other Developer Sites

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

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

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

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

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

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

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

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

Web Review
http://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
http://webcoder.com/
Nick Heinle's all-encompassing site on DHTML and JavaScript.

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

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

Expand/Collapse All Display/Hide All

Admittedly, this technique is becoming popular with IE4-specific pages. We, too, will discuss the Explorer methods in detail, but we'll move a step further to create a Navigator version, and finally a cross-browser version of expandable outlines.

In This Column

We will discuss:

Along the way, we'll explore for the first time:

We start with an overview of the display property.


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/