jQuery plugin - 高さ固定のAccordion

前回のシンプルなアコーディオンには不満な点が一つある。
それは同じ高さのコンテンツ要素の場合、表示/非表示の切り替え時に高さがガタガタすること。

この表現で伝わっているかちょっと疑問だが、とにかくガタガタしないものが欲しいのだよ!

ということで、今回は前回のものを流用して高さ固定のアコーディオンを作ってしまいましたとさ。

考え方:

• ラッパー要素(親要素)の高さを固定する。
• コンテンツ要素の高さを揃える。
• 各トグル要素の初期位置(top)を記憶しておく。
• クリックされたトグル要素とそれより前にある要素の position は「static」に、後にある要素は「absolute」にして記憶していたtopの位置を指定する。

という動作を行うようにする。

基本的にはこれだけ(のはず)。
それ以外外にはabsoluteにする要素のwidth指定は忘れずに。

要素の高さを揃える方法は「jQueryで要素の高さを揃える」を参照して下さい。

今回も前回と同様、どの要素をstatic/absoluteにするか、一々処理していたのでは重いので(たかが知れてるが)、トグル要素ごとに記憶させて関数をdataに保存しています。

Usage

jQuery(function($){
 $.myAccordion({
  wrap:'#itunes-navi',
  tgl:'.itunes-category-tgl',
  cont:'.itunes-genre-list'
 });
});

Source:jquery.myaccordion.js

Demo:jQuery plugin - myAccordion demo

ファイルサイズは2.17KBとかなり小さい。

当り前のことだが、必要な機能だけあれば良いワケで、作るのが困難なものでなければ、自分で作った方がいろんな意味で有意義だね。