セールス採用 / グシャッてからが本当の自分だった
セールス採用 / グシャッてからが本当の自分だった
2015.04.10

超簡単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です。