Toggler (jQuery Plugin)

jsを書かなくても要素にデータ属性を指定するだけで目的の要素に対して指定したクラスをつけたり外したりしてくれるjQueryプラグインです。

使い方

サンプルではクリックの度に要素を非表示にするセレクタ.hidden-xs-up が追加、削除されます。

<a href="#target" data-toggler="hidden-xs-up" aria-controls="#target">link</a>
<button role="button" data-toggler="hidden-xs-up" data-target="#target" aria-controls="#target">button</button>

<div id="target">...</div>

イベント

クラスが追加された時と外された時にそれぞれイベントが発生します。

$('#target').on('on.toggler', function () {
  console.log('addClass');
});
$('#target').on('off.toggler', function () {
  console.log('removeClass');
});