WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column12

Expandable Outlines
Explorer 4: using the display property

In Explorer, the value of the CSS display property is reflected in the display property of an element's style:

elementReference.style.display

As we have demonstrated, only the none value has any effect in Explorer, so style.display can be changed to one of five string values, but with only two possible results:

           "none" - element is not rendered

          "block" |
         "inline" | element is rendered in 
      "list-item" | its default rendering
"" (empty string) |

It is best to use the empty string option for "default rendering" since it is the neutral choice. The following single-line script, therefore, toggles the display of an element:

elementReference.style.display = (elementReference.style.display == "none" ) ? "" : "none";

If the display is none, it will be changed to default (""). If it isn't, it will be changed to none.

Two headings from our first page are immediately below. Clicking will expand them to display contained links. A second click will collapse them. The other contents of the page will be repositioned accordingly: (IE4 only)

World Wide Web Consortium (W3C)

HTML 4.0 Proposed Recommendation
HTML 3.2 Recommendation
Cascading Style Sheets, level 1 (CSS1)

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:

• Windows ZIP
• Acrobat PDF
• UNIX TAR.GZ

The HTML for the above example is:

<H3>
<A HREF = "javascript:expandIt(elOne)"
   STYLE = "text-decoration:none">
       World Wide Web Consortium (W3C)</A></H3>
<P ID = "elOne"
   STYLE = "display:none; background-color:#EEEEAA">
.
.
.
</P>

<H3 STYLE = "cursor:hand;"
    onClick = "expandIt(elTwo)">Netscape</H3>
<DIV ID = "elTwo"
     STYLE = "display:none; background-color:#EEEEEE">
.
.
.
</DIV>

Two different ways of calling the toggle expandIt() function are demonstrated. There are others, but these are the most straight-forward. First, a link is created, with a JavaScript HREF, which passes the element-to-be-manipulated as an argument to expandIt(). To avoid the traditional underlined link display, an inline STYLE sets text-decoration for the link to none. In the first example, we want to toggle the display of elOne, which is a P element. elOne is not rendered when the page loads, because it has a display of none in its inline STYLE definition.

The single function for toggling display, expandIt(), toggles the display of the passed element.

function expandIt(whichEl){
    whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
}

Therefore, to create expandable/collapsable elements in Explorer, we must give the expandable elements an ID, for easy identification. This ID is passed to a function which toggles the element's display value.

In the second example above, the onClick handler is applied directly to the H3 element, avoiding the link, and the need for backward-compatibility. The cursor shape is changed to signal to the user that the heading is clickable. The element we expand is a DIV, that is, a collection of elements.

Simple enough. Now let's add those little triangles to our outline, like on our first page.

Produced by Peter Belesis and

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks

Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape? Microsoft Article: BitLocker Encryption on Windows Server 2008 Go Parallel Article: Intel Thread Checker, Meet 20 Million LOC IBM Whitepaper: Innovative Collaboration to Advance Your Business Internet.com eBook: Real Life Rails Avaya Article: Call Control XML - Powerful, Standards-Based Call Control Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks Internet.com eBook: The Pros and Cons of Outsourcing Internet.com eBook: Best Practices for Developing a Web Site

IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future" Avaya Article: Call Control XML in Action - A CCXML Auto Attendant Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008 Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++ HP Video: Is Your Data Center Ready for a Real World Disaster? Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices HP On Demand Webcast: Virtualization in Action Go Parallel Video: Performance and Threading Tools for Game Developers

Rackspace Hosting Center: Customer Videos Intel vPro Developer Virtual Bootcamp HP Disaster-Proof Solutions eSeminar HP On Demand Webcast: Discover the Benefits of Virtualization MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications Microsoft Download: Silverlight 2 Software Development Kit Beta 2 30-Day Trial: SPAMfighter Exchange Module Red Gate Download: SQL Toolbelt

Iron Speed Designer Application Generator Microsoft Download: Silverlight 2 Beta 2 Runtime MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

IBM IT Innovation Article: Green Servers Provide a Competitive Advantage Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

All Rights Reserved. Legal Notices.
Created: Jan. 14, 1998
Revised: Jan. 18, 1998

URL: http://www.webreference.com/dhtml/column12/outIEone.html