Inside Technique : Expanding Headings
This demonstrates how you can add expanding and collapsing headings as used on our home page to your web-page. We designed this technique to require no extra script writing by the page author. Instead, attributes are used to define the relationship between the expand and collapse arrows and the detailed information.
The example below is the "What's New" section from October 21. Notice how the table automatically grows when expanded.This table is designed for Internet Explorer 4.0
As you review the following description, we recommend you view the source behind page and examine how the expanding/ collapsing table was constructed.
This example is created with a 2 column table. The first column contains the 4 and 6 indicators. These indicators are characters from the webdings font that is already installed with Internet Explorer. The second column contains the header and a detailed description of the header. You can define the description to be initially hidden or collapsed.
The default is for the details to be collapsed. Below demonstrates a collapsed header:
When defining the row, the child attribute on the expand/ collapse indicator indicates the ID of the element that is to be displayed or hidden. The Book Information are wrapped by a DIV with an ID of "dBI" and that corresponds to the CHILD attribute on the table cell containing the indicator. This is how the code knows what should be displayed or hidden each time the indicator is selected.
The above creates an initally collapsed header. The number "4" for the indicator is the character that represents the 4 when displayed with the WebDings font.
If you want the header to be initially expanded, a few extra style properties need to be set, and the character "6" needs to be used for the indicator:
There are three differences between defining an initially expanded header versus a collapsed header:
To hook up the outline to the code, the TABLE definition contains two event handlers.
The onselectstart event handler ensures the indicator cannot be selected. The onclick handler does the magic for hiding and showing the contents.
Once the table is defined, you need to include the code and the style sheet in the page. No modifications are necessary to
the code nor the style sheet regardless how many items you display. The minimal style sheet is listed below. You can add
additional styles for the detailed section and headers:
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.