Inside Technique : Expanding Headings
By Scott Isaacs

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.

6	Preorder Your Copy of Inside Dynamic HTML Inside Dynamic HTML is off to manufacturing and should be available by the first week of November! Reserve your copy of Inside Dynamic HTML today at Amazon.com.
6	Inside Techniques - Expanding Headers Demonstrates how to create the expanding and collapsing headers we are using in our "What's New" section.
6	Inside Scriptlets - MultiPage Scriptlet Our latest scriptlet adds support for creating multipage tabbed dialogs. The entire scriptlet is less than 4K. Also be sure to take a look at the HTML List Box and Animated Bar Meter Scriptlet.
4	Quick Jump Navigation We are adding a quick jump menu throughout the web-site to improve navigation. The quick jump menu is a mini-version of the home page menu allowing you to navigate without requiring you to return to our home page. The quick jump menu is displayed by clicking on the www.insideDHTML.com 6 that is displayed in the top-left corner of the page (when available).
4	Inside Dynamic HTML Book Information We reorganized the Inside Dynamic HTML book information area with a new look and feel.

Description

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:

   <TR><TD> CLASS="expand" CHILD="dBI">4</TD>
       <TD>
         <H4><A HREF="/dhtml/insidedhtml.htm">Inside Dynamic HTML Book Information</A></H4>
         <DIV id="dBI" CLASS="details"<
           <P class=start>We reorganized the Inside Dynamic HTML book information area with a new look and feel.
         </DIV>
       </TD>
   </TR>

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:

   <TR><TD> CLASS="expand" CHILD="dBI" STYLE="color: darkred">6</TD>
       <TD>
         &lth4><A HREF="/dhtml/insidedhtml.htm">Inside Dynamic HTML Book Information</A></H4>
         <DIV id="dBI" CLASS="details" STYLE="display: block"<
           <P class=start>We reorganized the Inside Dynamic HTML book information area with a new look and feel.
         </DIV>
       </TD>
   </TR>

There are three differences between defining an initially expanded header versus a collapsed header:

1. The expand indicator needs to be specified by the character "6"
2. The color for the expand indicator needs to be specified (style="color: darkred")
3. The details need to have the CSS display property specified (style="display: block")

To hook up the outline to the code, the TABLE definition contains two event handlers.

   <TABLE CLASS="menu" ONSELECTSTART="return ('expand'!=event.srcElement.className)" ONCLICK="checkExpand()">

The onselectstart event handler ensures the indicator cannot be selected. The onclick handler does the magic for hiding and showing the contents.

Code

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:

   <STYLE>
     .expand {vertical-align: top; font:12pt webdings; color: navy; cursor: hand; }
     .details {display: none}
   </STYLE>


   <SCRIPT LANGUAGE=JavaScript>
    function checkExpand() {
      var el = event.srcElement
      if ("expand"==el.className) {
        var ch = document.all[el.getAttribute("child")]
        if (el.innerText=="4") {
          el.innerText = "6"
          el.style.color = "darkred"
          ch.style.display = "block"
        } else
        {
          el.innerText = "4"
          el.style.color = ""
          ch.style.display = ""
        }
      }
    }
   </SCRIPT>

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.