Expandable Outlines: Internet Explorer 4 | WebReference

Expandable Outlines: Internet Explorer 4

Logo

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)



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:



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

 
All Rights Reserved. Legal Notices.

Created: Jan. 14, 1998

Revised: Jan. 18, 1998

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