2018秋の無料相談会
2018秋の無料相談会
2015.04.10

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

せいと

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

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

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

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

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

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

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

※この記事は、2013年06月11日に公開された記事を再編集したものです。

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