example
click here !!
***********************************************************************

このサイトでは InternetExplorer4.0 以降で行える DynamicHTML を説明します。
お気に入りに登録して頂けると作者は喜ぶみたいですよ(^^)

※ もう一度クリックすると最初の状態に戻ります。

***********************************************************************
source code
・HEAD部の記述
  <STYLE TYPE="text/css">
  <!--
   .showSum { クリック後に表示されるコメントの CSS 要素 }
   .hideSum { display: none }
  -->
  </STYLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
   function dynSummary() {
     var sample = document.all [ event.srcElement.sum ];
     if ( sample != null ) {
       if ( sample.className == "hideSum" ) {
         sample.className = "showSum";
       }
       else {
         sample.className = "hideSum";
       }
     }
   }
  // -->
  </SCRIPT>

・BODY部の記述
  <DIV sum="comment" onClick="dynSummary()">
  click here !!
    <DIV ID="comment" CLASS="hideSum">
      コメント
    </DIV>
  </DIV>
source point
onClick event によって内部のイベントを浮上させる Dynamic HTML です。
まずは BODY 部の説明から...
基本のフォーマットとして、DIV ブロックの中に別の DIV ブロックを作っています。 上の階層の DIV ブロックには "click here" というクリッカブル部分を用意し、 そのイベントハンドラとして "sum" を設定しています。また、"sum" の要素として 下の階層の "comment" を指定しています。
クリックすることで HEAD部の "dynSummary()" 関数へ処理が移行します。
次に HEAD 部の説明...
"dynSummary()" 関数では、まず変数 "sample" を設定し、そのプロパティを document.all[event.srcElement.sum] と指定しています。 この部分は重要なので一つずつ説明しましょう。

document : HTML ファイル全ての情報が格納されているオブジェクトです。
all : document オブジェクトに含まれる全ての要素(基本的には ID 指定しているもの)です。
event.srcElement : 下の階層にあるイベントを浮上させる命令です。
sum : イベントハンドラ。任意の名前を設定できます。

つまり、document.all[event.srcElement.sum] とは「このHTMLファイルの全ての要素のうち sum という イベントハンドラを持ったオブジェクトを上の階層に浮上させろ!」 という ことを著しています。
以降の if-else 文は コメントの表示状態による条件分岐です。分岐先では CSS を利用しています。

なお、[example] の "*****" と "*****" の行間には初期状態ではなにも表示されていませんが、 これは hideSum クラスを { display: none } 指定しているからです。