[jQuery] 要素の表示/非表示をアニメーション付きで簡単に切り替えるプラグイン

jQueryにはデフォルトでshow/hideメソッドやtoggleメソッドが用意されているので、要素の表示/非表示の切り替えが非常に簡単に行えます。

特にtoggleメソッドはまさにそのために用意されているメソッドなのですが、effectの指定ができなのが不満でした。
(内部でshow/hideを利用している)

また、要素の表示/非表示と同時にラベル(表示する/非表示にする、など)も同時に切り替えたい場合が多く、その部分を別途書かなければならないのが煩わしかったりします。

その点を踏まえて、こちらのプラグインを作りました。
アコーディオンメニューやFAQのページなどで利用されることを想定していますが、他にも利用シーンは色々あると思います。

Google Code: jquery-togglable
http://code.google.com/p/jquery-togglable/

» デモ

Google Codeのページに必要なファイルがzip形式で圧縮されて置いてありますので、ダウンロードしてお使い下さい。


HTML:

<p>
  <!-- rel属性に "toggleall" と指定すると、すべての要素の表示/非表示を切り替えます -->
  <a href="#" rel="toggleall" class="togglable">toggle all</a>

  <!-- rel属性に "showall" と指定すると、すべての要素を表示します -->
  <a href="#" rel="showall" class="togglable">show all</a>

  <!-- 上記の値("showall","toggleall")はオプションで独自に指定することができます。. -->
</p>

<div>
  <p>
    <a href="#id_of_block1" class="togglable">show</a> block #1.
  </p>
  <div id="id_of_block1" style="display:none;">
    block #1.
  </div>
 
  <!-- rel属性を使って要素別の独自ラベルを指定することが可能です。-->
  <p>
    <a href="#id_of_block2" rel="hide block #2" class="togglable">show block #2</a>.
  </p>
  <div id="id_of_block2" style="display:none;">
    block #2.
  </div>

</div>

Javascript:

$(document).ready(function () {
  $('a.togglable').togglable();
});

オプション:

オプションを指定することでラベルなどをカスタマイズすることができます。

$('a.togglable').togglable({
  showAllLabel: 'すべて表示する',
  hideAllLabel: 'すべて隠す',
  showLabel: '表示する',
  hideLabel: '隠す'
});

easing
string / null / easingを指定します。別途jQuery Easing Pluginが必要です。

effect
string / 'sliding' / アニメーションのエフェクト。'basic', 'sliding', 'fading' が指定できます。

hideAll
string / 'hideall' / 要素をすべて非表示にするアンカータグのrel属性に指定する値。

hideAllLabel
string / 'hide all' / 要素をすべて非表示にするアンカータグのテクスト(表示される部分)

hideLabel
string / 'hide' / 非表示にするアンカータグのテクスト(表示される部分)

showAll
string / 'showall' / 要素をすべて表示するアンカータグのrel属性に指定する値。

showAllLabel
string / 'show all' / 要素をすべて表示するアンカータグのテクスト(表示される部分)

showLabel
string / 'show' / 要素を表示するアンカータグのテクスト(表示される部分)

speed
string/integer / 'normal' / 表示/非表示の切り替えのスピード

toggleAll
string 'toggleall' / すべての要素の表示/非表示を切り替えるアンカータグのrel属性に指定する値