jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法

jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法

セイト

セイト

その3.「toggleClass」を使ってスイッチのオン・オフを切り替える

上記の2つだけでも結構使えますが、それに加えてメニューボタンのオン・オフ状態で見た目を変えたい場合もあるかと思います。
そんなときは「toggleClass」を使って装飾しましょう。
デモはこちら

これ、「.addClass()」や「.removeClass()」はいらないんです。
必要な記述は、わずか1行

JS

<script>
$(function(){
$("#acMenu dt").on("click", function() {
$(this).next().slideToggle();
$(this).toggleClass("active");//追加部分
});
});
</script>

HTML

さっきと同じです。

CSS

#acMenu dt{
display:block;
width:185px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
cursor:pointer;
background:url(images/i_swich.png) 177px -69px no-repeat;
padding-right:15px;
}
#acMenu dd{
background:#f2f2f2;
width:200px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
display:none;
}
#acMenu dt.active{
background:url(images/i_swich.png) 177px 18px no-repeat;
}

これまたシンプル。
使う際には、「.toggleClass(“active”)」のように、付けたいクラスを()内に入れてみてください。
また、タブメニューでもこれと同じことをしたい場合には、下記のように2行追加することで実装できます!

<script>
$(function(){
$("#tabMenu li a").on("click", function() {
$("#tabBoxes div").hide();
$($(this).attr("href")).fadeToggle();
$("#tabMenu li a").removeClass("active");//追加部分
$(this).toggleClass("active");//追加部分
});
return false;
});
</script>

まとめ

いかがだったでしょうか。
toggleさんを使うことでだいぶコードが短縮されたと思います。
ご意見・ご質問などあればぜひよろしくお願いいたします!

ちなみに辞書サイトのweblioさんによれば、toggleとは「ボタン」とか、「同一の操作で二つの状態を交互に切り換えること」を意味するのだそう。なるほど。


LIGでは、エンジニアを絶賛募集中!
採用に応募する

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

セイト
セイト Ex-President & VPoE at LIG Philippines. / 堀口 セイト

現在はミネルバ大学院に在籍しつつ、SNS総フォロワー数11万人を誇るエンジニアコンサルタントとして活躍中。 初代ポケモンで最初に選ぶならゼニガメ。でも本当に好きなのはフシギダネ。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL