指定のクラスを複数のタグに追加したり、削除したりをtoggleするjQueryプラグイン #JavaScript

1回目にクリックした時は例えば「on」というクラスが付き、2回目クリックした時は「on」が削除されるような場合に使えます。

クリック時に複数のクラスを変えたい場合などに、jsを書き換える必要がないような仕組みにしています。

割りと使う機会が多い機能でなのに、いままでプラグイン可していなかったので使いやすいようにプラグイン化してみました。

GitHub: https://github.com/kamem/jquery.dataExtend

（jQuery.dataExtedの説明と合わせて同じリポジトリに入っています。）

DEMO

仕様

クリックしたタグのクラスをtoggleする。
他要素もしたい場合は「content_（toggleしたいタグのクラス名）」のように指定する。
ストレージ保存可能。

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tab.js"></script>
<script type="text/javascript">
$(function(){
     $('.toggle').extraToggleClass();
});
</script>

html

<p class="toggle content_test">toggle click</p>

<p class="test">test</p>
<p class="test">test</p>

「content_test」「content_」の後の文字（例の場合test）クラスが付いているタグのクラスも一緒にtoggleします。

初期設定

name: 'on',
isSessionStorage: false

name: {String} toggleしたいクラス名
isSessionStorage: {Boolean} ストレージに保存するか