jQueryで開閉メニューを作成する例|slideToggle()で簡単にアコーディオンメニュー

今回はjQueryを利用して、アニメーションをする開閉メニュー(アコーディオンメニュー)を、簡単に作成する例となります。

jQueryで開閉メニュー(アコーディオンメニュー)を作成する例

jQueryのslideToggleメソッドでは、オブジェクトに指定した要素の高さを変化させ、表示・非表示を切り替えることができます。

以下の例では、そのslideToggleメソッドを利用しメニューの開閉を行っています。

See the Pen jQuery slideToggle by yic666kr (@yic666kr) on CodePen.

上記のアコーディオンメニューでは、まず、CSSでメニュー項目を display: none; で非表示とします。

そして、jQueryでonメソッドを利用し指定した要素がクリックされたら、slideToggleメソッドを実行し指定したメニュー項目の開閉を行っています。

slideToggleメソッドの引数について

slideToggleメソッドの引数には、以下の値を指定できます。

第1引数

アニメーションの変化スピードをミリ秒単位で指定できます。例えば 1500 を指定した場合、1.5秒かけてアニメーションを実行します。

また、次のいずれかの値でも指定できます。

  • slow
  • normal(デフォルト値)
  • fast

第2引数

アニメーション内のイージング(加速・減速)の設定値を、次のいずれかの値で指定できます。

  • swing(デフォルト値)
  • linear

また、イージングの種類はプラグインを追加することで増やすことができます。詳しくは以下のリンク先を参考にしてみてください。

jQuery Easing Plugin

第3引数

コールバック関数を指定できます。

CSSのみで開閉メニューを作成する場合

CSSのみでアニメーションをする開閉メニューを作成する方法については、以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。