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

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

セイト

セイト

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

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

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

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

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

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

【こちらもおすすめ】

※ この記事は、2013年6月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です。

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

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

この記事のシェア数

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

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

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