目次 [ close ]
  1. 「初心者向け！jQueryでアコーディオンメニューを作ってみよう」
  2. 完成イメージを確認しよう
  3. 手順
  4. さいごに

「初心者向け！jQueryでアコーディオンメニューを作ってみよう」

Webサイトでよく見かける「アコーディオンメニュー」。クリックするとコンテンツがスライドして表示・非表示になるこの仕組みは、FAQやメニュー表示など、さまざまな場面で使われています。

今回は、jQueryを使ってアコーディオンを簡単に実装する方法を初心者向けにわかりやすく解説します。HTML・CSS・jQueryの基本を押さえながら、コピペで使えるサンプルコードもご紹介！

「jQueryでアコーディオンを作ってみたいけど、どうやるの？」という方にぴったりの記事です。ぜひ一緒に学んでいきましょう！

ゆうや

難しそうに見えるけど、やってみると意外とカンタンですよ！
最初の一歩を一緒に踏み出しましょう！

完成イメージを確認しよう

まずは、これから作るアコーディオンメニューの完成形を見てみましょう。
下のデモでは、クリックで項目が開閉し、他の項目をクリックすると自動的に前の項目が閉じる仕様になっています。

See the Pen アコーディオン　自動で閉じる by yuya o (@yuya-o) on CodePen.

実際に触ってみることで、これから自分がどんな機能を作るのかイメージが掴めますね！
では、次のセクションから実装の流れをステップごとに解説していきます。

手順

STEP1
HTMLでアコーディオンの土台をつくろう

まずは、アコーディオンメニューの構造をHTMLで作成します。

See the Pen アコーディオン　自動で閉じる　STEP1 by yuya o (@yuya-o) on CodePen.

ここがポイント！

  • アコーディオンの1セットは <li> タグの中にまとめられています。
  • .btn がクリックできる見出し部分で、そのすぐ下に .menu という開閉する内容部分があります。
  • span.icon と span.icon2 は、＋や−のようなアイコンを作るために使います。
STEP2
CSSで見た目を整えよう

次に、アコーディオンのデザインを整えていきます。

See the Pen アコーディオン　自動で閉じる　STEP2 by yuya o (@yuya-o) on CodePen.

ここがポイント！

  • .btn でクリック部分をデザインし、中に＋マーク用の span を絶対配置しています。
  • .menu は初期状態で height: 0 に設定されていて、中身が見えないようになっています。
  • .menu.open をつけると height: 80px になり、ふわっと中身が表示されます。
  • .icon2 の回転で、アイコンが「＋ → －」に切り替わるアニメーションを演出しています。
STEP3
jQueryで動きをつけよう

最後に、jQueryを使ってクリックでメニューが開閉するようにします。
また、他のメニューを自動で閉じる処理も含まれています。

See the Pen アコーディオン　自動で閉じる by yuya o (@yuya-o) on CodePen.

ここがポイント！

  • .btn をクリックしたときの動きを定義しています。
  • 開いている .btn があれば閉じ、クリックされたものだけを開きます。
  • .next('.menu') で、クリックされた .btn のすぐ下にある .menu 要素を選んでいます。

さいごに

今回は、jQueryを使ってアコーディオンメニューを作る方法をご紹介しました。
クリックするとメニューが開いて、他のメニューは自動で閉じる、そんなシンプルだけど実用的な動き、実装できましたか？

このアコーディオンの仕組みは、FAQページやサイドメニュー、プロフィールの詳細表示など、いろいろな場面で活用できます。

最初はjQueryの書き方に戸惑うかもしれませんが、「なにがどう動いているか」を少しずつ理解していけば、必ず自信につながります。