jQuery plugin - シンプルなアコーディオンをさらに工夫してみる

jQueryのpluginとして有名なものの一つに「Accordion」があるが、色々な動作を可能とするために、ファイルサイズが大きくなり過ぎている。

実際にはあれ程のものは必要ない。

ということで、もっとシンプルなものを作ってみる。

シンプルなアコーディオン

最もシンプルなアコーディオンはトグルとなる要素と表示するコンテンツが同じ数だけあることを前提にすれば容易に実装できる。

クリックされたトグル要素のインデックスを取得して同じインデックスのコンテンツを表示し、それ以外のコンテンツは非表示にすれば良い。

ただそれだけなら誰でも思いつくので、その他に3つの機能を追加した。

追加した機能:

1. 表示/非表示の切り替え途中(animate動作中)の再切り替え操作を無効にする

これは表示要素を切り替えている途中にまた切り替え操作を行われると、表示される要素が二つになってしまう可能性があるため。

具体的にはこのようにしている。

if(!$conts.is(':animated')){
  // ...
}

2. クリックされたトグル要素に"current"class属性を追加する

これは見た目の問題になるのですが、表示されているコンテンツと対になるトグル要素は見た目に変化がある方がユーザビリティが良くなると思われ、CSSにて、何らかの変化を加えられるようにするためです。

3. トグル要素のクリック時に呼ばれる関数をdataに保存する

トグル要素のクリック時に毎回特定の要素を取得するなどの処理を走らせるよりも、覚えさせておいてクリックされたら、そのトグル要素固有の関数を走らせた方が処理は軽くなるはず、という考えです。

後は以下のようにして呼び出すだけなのでラク。

$(tgl).click( function(e) {
                $.data(e.target, key).call(e.target);
                return false;
}

Usage

$.simpleAccordion({
  tgl:'.ac-tgl',
  cont:'.ac-cont'
});

Demo:Simple Accordion Demo

Source:jquery.simpleAccordion.js