セクション作成

できたできた。クリックすると段落が展開したり隠れたりするJavascript。

addEvent(window, "load", init);

function init(){
  var divs = document.getElementsByTagName('div');
  var N = divs.length;
  for(var i=0; i<N; i++){
    if(divs[i].className == 'section'){
      var shead = (divs[i].style.display == 'none') ? '+' : '-';
      var ele = document.createElement('div');
      ele.className = 'sectionbar';
      ele.id = 'sectionbar'+i;
      ele.title = divs[i].title;
      if(ele.title == ''){ele.title = 'Section';}
      ele.appendChild(document.createTextNode(shead + '[' + ele.title + ']'));
      addEvent(ele, 'click', change(ele.id));
      divs[i].parentNode.insertBefore(ele, divs[i]);
      i++; N++;
    }
  }
}

function change(id){
  return function(){
    var bar     = document.getElementById(id);
    var section = bar.nextSibling;

    if(section.style.display == 'none'){
      section.style.display = 'block';
      bar.firstChild.nodeValue = '-['+bar.title+']';
    }
    else{ // (section.style.display == 'block')
      section.style.display = 'none';
      bar.firstChild.nodeValue = '+['+bar.title+']';
    }
  }
}

function addEvent(el, type, listener, useCapture)
{
  if(el.addEventListener){
    el.addEventListener(type, listener, useCapture);
    return true;
  }
  else if(el.attachEvent){
    return el.attachEvent("on"+type, listener);
  }
}

簡単だろうと思っていたけど、案外大変だった。基本コンセプトとしては、HTML内にJavascriptのコードを埋め込まないという方針だったので、その辺が面倒っぽい。IEがaddEventListenerに対応してなくてattachEventを使う必要があったり、イベントとして登録する関数の挙動を変えるのにクロージャ使ったりと色々勉強になりました。

サンプル

<div class="section" title="セクション1">
this is a section 1.
  <div class="section" title="セクション1.1">
  this is a section 1.1.
  </div>
</div>

<div class="normal">
this is not a section.
</div>

<div class="section">
this is a section 2.
</div>

<div class="section" style="display:none">
this is a section 3.
</div>

こちらで確認できます。
http://www.geocities.jp/kobayashi01234/misc/section/section.html

display:noneを設定しておくとあらかじめ閉じてあるセクションになります。階層構造も問題ないし、あとは実際に使ってみて色々修正していけばよさげ。やっぱJavascriptすごいわー。