プログラミング

【jQuery】アコーディオンメニュー作成法(slideToggle)

  • サイトにアコーディオンメニューを実装したい!

そんな方々に向けて、アコーディオンメニューの作成法を紹介します。

この記事を読んで作れるもの

この記事では、jQueryを使って、メニューが5つあるアコーディオンメニューを作ります。

「タイトル」を押せば「テキスト」が表示される簡単なつくりです。

簡単なつくりのほうが、使いまわす時に便利かなぁと。

コードの紹介

jQueryはhtmlの中に書きました。CSSは使いまわす時に不便なので使っていません。

今回の創作に関係するところはマーキングしてあります。

お役立ちメモ

  • 「slideToggle」の「T」は大文字です。「slidetoggle」だと動きません。
  • メニューごとにクラス名を変えています(txt1、txt2、…)。同じクラス名にすると、1つのメニューをクリックすることで、全てのメニューが開いてしまいます

slideToggleが効かないとき(代替案)

原因不明のバグに悩んだときの代替案を紹介します。

bootstrap4のアコーディオンを使う

bootstrap4のコンポーネントを使用しましょう。

下記の参考リンクからソースをコピペできます。

折り畳み~Bootstrap4移行ガイド

ただし、テンプレートどおりだと、1つのメニューを開けば他のメニューが閉じてしまう仕様になっているので、それが嫌な場合は個別に直す必要があります。

jQueryのif文を使う

jQueryのif文を使う方法もあります。

「タイトル」をクリックしたとき、もし「テキスト」が非表示なら表示させ、非表示なら表示させる

というif文を作ればokです。なんとなく難しそうですが、実際はそうでもないです。

コードの紹介

せっかくなので、こちらのコードも記録します。

「slideToggle」との違いは、メニューごとのクラス名変更がいらないこと。

 

今回のまとめ

いかがでしたでしょうか。

これからも役に立ちそうなスキルを投稿していきますので、よろしくお願いします!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です