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

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。

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

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

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

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

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

【こちらもおすすめ】

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

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