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
HTML 4.0 Proposed Recommendation New! - Important!!
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
Cascading Style Sheets, level 1 (CSS1)
The Document Object Model New!
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!
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
Do-it-yourself mark up. Then what will the W3C do?
Dynamic HTML documentation Updated!
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:
Dynamic HTML documentation
a.k.a Anything you can do, I can do better.
Internet Client SDK Invaluable!
The Complete Reference for Internet Explorer. Dynamic HTML section superior to Microsoft's own DHTML docs, above.
Microsoft - Final Release Notes 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...
What's New in Internet Explorer 4.0 Final Release? New!
Changes between Internet Explorer 3 and 4 New!
self-expanding MS WORD or Acrobat PDF format.
You read it here first: ECMA stands for European Computer Manufacturers Association
Microsoft Scripting New!
Microsoft's new home page for all its scripting docs, articles and links.
Complete Reference for JScript 3 for IE4.
What's New in JScript 3.0 New!
The 8-track tape of scripting.
W3C PNG Recommendation
The Official PNG Home Page
Plug-in for Netscape Navigator
Communicator CSS1 Known Issues
There's no place like home
Cascading Style Sheets
An Introduction to CSS
Style Sheet Syntax
Excert from the upcoming book HTML Web Publishing SECRETS from IDG Books
Cascading Style Sheets: Designing for the Web
Excerpts and a full chapter from the book by Hakon Lee and Bert Bos of the W3C.
The Evolution of Style Sheets
A history of CSS and future directions.
Other Developer Sites
IE Help New!
Compuserve's new Explorer-related megasite.
Dynamic HTML in IE New!
Weekly IE-related DHTML techniques by yours truly.
Netscape Help New!
Compuserve's new Netscape-related megasite.
Compuserve's new megasite devoted solely to coverage of browser development.
DHTML Dude New!
Microsoft's own regular DHTML column with a name I wish I had thought of.
C|NET's site for web developers. Regular SuperScripter column, and longer in-depth occasional articles.
Scott Isaacs' comprehensive source of Dynamic HTML information and techniques. Focus on IE4. MSIE4 absolute must!
Dynamic HTML Zone
Macromedia's ambitious new Dynamic HTML mega-site with articles, tutorials, and discussion group.
Regular coding columns, but their Wired layout needs deciphering.
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:
- the CSS1 display property
- browser support of display (surprising results)
- simple outlines in Explorer
- outlines with swapped images in Explorer
- outlines in Navigator
- cross-browser outlines
- multi-item expansion/collapse with one click
Along the way, we'll explore for the first time:
- how to use the powerful new Explorer methods, tags() and item()
- how to use the Navigator scrollTo() method.
We start with an overview of the display property.
Produced by Peter Belesis andAll Rights Reserved. Legal Notices.
Created: Jan. 14, 1998
Revised: Jan. 18, 1998