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'
 });
});




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

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

0 Comments:

Recent Posts