Script.aculo.us を使った Accordion Effect（完成）

昨日悩んでいた奴ができました。

デモ

Accordion を試す

ダウンロード

ライセンスは… script.aculo.us と一緒で MIT License にでもしておきます。

Accordion ja 1.0

これは何？

Rico のページで Accordion Exmple として紹介されていたり、Moo.fx でも Top ページで使われていて、Documentaion ページでは fx.Accordion として紹介されているようなことを、Script.aculo.us だけを使ってやってみようというものです。上のサンプルをみてもらった方がわかりやすいと思いますが、いくつか並んだパネルの中、クリックして表示部を選択できますが、開いているパネルは常に一つ、というもの。

Script.aculo.us でも Wiki にひとつ実装が載っていますが、汎用性が低そうだったので（項目ごとに id なんか打てるか！っつぅの）、僕が使いやすいように実装してみました。

使い方

まず、prototype.js と scriptaculous.js(?load=effects) は必須です。二つを読み込んだ後に、

<script type="text/javascript" src="accordion.js"></script>

として本体スクリプトをロードしてください。

次に実際に Accordion 動作をする HTML 要素ですが、こんな感じです。

<div id="accordion">

   <div class="panel">
      <h3>Item 1</h3>
      <div class="panelBody">
         <p>Something something.</p>
      </div>
   </div>

   <div class="panel">
....
</div>

満たすべき条件は以下。

• Accordion は任意 id の block 要素で囲われていること
• 各パネルは “panel” という class nameの block 要素で囲われていること
• 各パネル毎にヘッダ要素（畳まれた状態でも視認可能な要素）を一つ設定すること
• 各パネル毎にボディ要素（開いた時に視認確認になる要素）を一つ設定し、“panelBody” という class nameを与えること

そして以下のように初期化すると蛇腹として動作するようになります。

var acc = new Accordion("accordion", "h3", "acc");

Accordion の引数は以下の３つ

1. Accordion 全体を囲う block 要素の id
2. 各パネルのヘッダ要素を構成する Tag 名
3. 変数（インスタンス）名

その他

パネル要素クラス名（default では“panel”）とパネルボディ要素クラス名（default では“panelBody”）は変更可能です。Accordion クラス初期化の際に 第四引数としてカスタムパネル要素クラス名、 第五引数としてカスタムパネルボディ要素クラス名が指定できます。

今回の実装で気がついたことなどは次回エントリで。。