えー、僕のようにオブジェクト志向やらDOMやらprototypeやらを全く理解していなくても簡単に導入出来るように、テンプレートを配布しているサイトがあったので、そこを参考にしました。moo.fxのチュートリアルや他にタブやカラム風のデザインもあります。
NYOKIGLITTER – Horizontal Accordion

上記のサイトからzipファイルをダウンロードすると、htmlとscriptsと画像が入っています。moo.fx.js、moo.fx.pack.js、prototype.jsと三つのスクリプトを使っています。cssで装飾出来るので結構簡単にイメージ通りになりました。アコーディオン効果を出せるライブラリにRicoってのもあるみたいですが、こっちはどうもcssが使えないっぽい。

ダウンロードしたhtmlはjavascriptsの部分をいじらなければ、class=”display”がtoggleボタンになっていて、class=”stretcher”が展開される内容です。そのままでは、toggleボタンの画像が一種類しか使用できないので、こんな感じで空divを使ってcssで画像を指定してみました。

<h3 class="display" title="two">
  <div id="recentcomment"></div>
</h3>

<div class="stretcher">
  <p>あわわあわわ</p>
</div>