WEB

超簡単jQuery!toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法

超簡単jQuery!toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法
(編集部注:2013年06月11日に公開された記事を再編集したものです。)

こんにちは。デザイナーのせいとです。

最近友人と『中学生円山』を観に行きました。
女性にはおそらく理解できないであろう「男子中学生あるある(主に下ネタ)」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい(´ω`)

さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle/fadeToggle/toggleClass」をご紹介します。

こいつらを知っとくと下記のようなメリットがあります。。

  • アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる
  • 超シンプルな記述なので、今日から使える

いやーこれは便利ですね。
というわけで、早速解説していきます。


【こちらもおすすめ】
「動きが気持ちいい!jQuery(+CSS3)で作るアコーディオンまとめ8選!」

超簡単jQuery!“toggle系メソッド”を使ってタブとかアコーディオンをささっと書いちゃう方法

その1.「slideToggle」を使ってアコーディオンメニューを実装する

押したらスラスラと降りてくるメニューを実装します。
デモはこちら

こいつを実装するのに「.slideUp()」や「.slideDown()」、if文はいりません。必要な記述は、わずか5行

JS

<script>
	$(function(){
		$("#acMenu dt").on("click", function() {
			$(this).next().slideToggle();
		});
	});
</script>

HTML

<dl id="acMenu">
	<dt>アコーディオンメニュー1</dt>
	<dd>アコーディオンメニューが開く。</dd>
	<dt>アコーディオンメニュー2</dt>
	<dd>アコーディオンメニューが開く。</dd>
	<dt>アコーディオンメニュー3</dt>
	<dd>アコーディオンメニューが開く。</dd>
</dl>

CSS

#acMenu dt{
	display:block;
	width:200px;
	height:50px;
	line-height:50px;
	text-align:center;
	border:#666 1px solid;
	cursor:pointer;
	}
#acMenu dd{
	background:#f2f2f2;
	width:200px;
	height:50px;
	line-height:50px;
	text-align:center;
	border:#666 1px solid;
	display:none;
	}

シンプルですね!
また、「.slideToggle(“fast”)」や「.slideToggle(“slow”)」、「.slideToggle(200)」などでアニメーションの早さを変えることができます。

~ざっくり補足~
メニューが複数ある場合には、デモにある記述のように「.next()」(意味=次のやつ)を使うといいです。
これがないと、dtを押したときに全てのddが表示されてしまいます。
逆に言えば、使う箇所が1つしかない場合、こいつは使わなくてOKです。

その2.「fadeToggle」を使ってタブメニューを実装する

次に、タブメニューを作りたいと思います。
デモはこちら

こいつを実装するのに「.show()」やif文はいりません!
必要な記述は、わずか7行。

JS

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

HTML

<ul id="tabMenu" class="clearfix">
	<li><a href="#tabBox1">タブメニュー1</a></li>
	<li><a href="#tabBox2">タブメニュー2</a></li>
	<li><a href="#tabBox3">タブメニュー3</a></li>
</ul>
<div id="tabBoxes">
	<div id="tabBox1">タブボックス1</div>
	<div id="tabBox2">タブボックス2</div>
	<div id="tabBox3">タブボックス3</div>
</div>
#tabMenu ul{
	width:600px;
	}
#tabMenu li{
	float:left;
	}
#tabMenu li a{
	display:block;
	width:198px;
	height:48px;
	line-height:50px;
	text-align:center;
	border:#ccc 1px solid;
	}
#tabBox1,#tabBox2,#tabBox3{
	width:598px;
	height:300px;
	border:#ccc 1px solid;
	}
#tabBox1{
	background:#FCF;
	}
#tabBox2{
	background:#FFC;
	display:none;
	}
#tabBox3{
	background:#ccc;
	display:none;
	}

これも「.slideToggle()」同様に「.fadeToggle(“fast”)」などでアニメーションの早さが変えることができます。

~ざっくり補足~
「$(this).attr(“href”)」=「”#tabMenu li a”の”href”の値」=「”tabBox1″,”#tabBox2″,”#tabBox3″のどれか」を意味します。

その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では、エンジニアを絶賛募集中!
http://liginc.co.jp/recruit/mid_career

この記事を書いた人

せいと
せいと フロントエンドエンジニア 2012年入社
最近フロントエンドエンジニアになりました。
第一回HTML5カルタ大会で優勝しました。
休日の過ごし方は、"Jazz Barでスコッチを片手に『世界の終りとハードボイルド・ワンダーランド』を読む"です。

こちらもおすすめ

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

  • 著者吉本 集
  • 価格¥ 3,002(2015/10/23 20:45時点)
  • 出版日2015/04/21
  • 商品ランキング119,598位
  • 大型本336ページ
  • ISBN-104774172731
  • ISBN-139784774172736
  • 出版社技術評論社
最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ

  • 著者堀口 誠人
  • 価格¥ 2,376(2015/11/12 18:35時点)
  • 出版日2015/10/24
  • 商品ランキング20,152位
  • 単行本208ページ
  • ISBN-104797384557
  • ISBN-139784797384550
  • 出版社SBクリエイティブ