BLOG

【jQuery】動きのあるアコーディオンメニューまとめ(コピペ用サンプル付き)

2021/11/12

アコーディオンメニューとは、最初はメニューの一部だけが表示されていて、
クリックすると隠れていた部分が開閉するタイプのメニューです。
小さいスペースにコンパクトにメニューを設置できるため、スマートフォンでは特に頻繁に使われています。

コーディングをしていると、Webサイトのどこかに必ずと言っていいほど使われているのですが、
アコーディオンにも色々なパターンがあり、慣れないうちは作るのに手間取ってしまいがちです。

そこで今回のブログでは、よく使われるアコーディオンメニューをまとめてみました。
デモページもあるのでぜひ参考にしてみてください!

デモページ

今回紹介するすべてのアコーディオンメニューをまとめたデモページはこちらになります。
クリックして動きを確認しながらコードと見比べてみてください!

デモページ

アコーディオンメニューサンプル

開くと”くの字矢印”が上下に反転するアコーディオン

ソースの表示

ボタンの中のinnクラスの疑似要素として”くの字矢印”を作っています。
また、メニューは最初はopacity:0;で透明にして見えなくしています。

ボタンがクリックされたらjQueryでボタン自身とメニューにis-openクラスを追加し、
is-openクラスのCSSでボタンの反転とメニューが上から現れる動きをつけています。

開く前は3本線、開いたら×ボタンになるアコーディオン

ソースの表示

jQueryは1つ目と同じです。
こちらはクリックされたら3本線の上と下の2本が移動して×になり、
真ん中の1本はopacity:0;で消える仕組みです。

開く前は+ボタン、開いたら-ボタンになるアコーディオン

ソースの表示

こちらもjQueryは1つ目と同じで、
クリックされたら縦の線が消えて+が-になる仕組みです。

項目全体がボタンになっているアコーディオン

ソースの表示

項目のどこをクリックしてもアコーディオンが開くタイプです。
jQuery3行目のstop()関数は、ユーザーが項目を素早く連打した時にアコーディオンが何度も開閉してしまわないようにするために設定しています。

1つ開くと他の項目が閉じるアコーディオン

ソースの表示

こちらはWebサイトの「よくある質問」の一問一答などでよく使われるタイプのアコーディオンメニューです。
jQueryの4行目で「クリックされていない項目を閉じる」操作をして、1つしか開かないようにしています。

まとめ

いかがだったでしょうか?

慣れないうちは、アコーディオンメニューはCSSのアニメーションやjQueryが関わってくるから難しそう・・・と思ってしまうかもしれませんが、
いくつかのパターンさえ押さえていれば、時間をかけずに簡単に作れるようになると思います。

だいたいどのWebサイトでもアコーディオンメニューはスマホのヘッダーなどで使われています。
色々なサイトをスマホサイズで見てみるのも勉強になっていいのではないでしょうか。

最後まで読んでいただきありがとうございました!