「初心者向け！jQueryでアコーディオンメニューを作ってみよう」
Webサイトでよく見かける「アコーディオンメニュー」。クリックするとコンテンツがスライドして表示・非表示になるこの仕組みは、FAQやメニュー表示など、さまざまな場面で使われています。
今回は、jQueryを使ってアコーディオンを簡単に実装する方法を初心者向けにわかりやすく解説します。HTML・CSS・jQueryの基本を押さえながら、コピペで使えるサンプルコードもご紹介！
「jQueryでアコーディオンを作ってみたいけど、どうやるの？」という方にぴったりの記事です。ぜひ一緒に学んでいきましょう！
ゆうや
難しそうに見えるけど、やってみると意外とカンタンですよ！
最初の一歩を一緒に踏み出しましょう！
完成イメージを確認しよう
まずは、これから作るアコーディオンメニューの完成形を見てみましょう。
下のデモでは、クリックで項目が開閉し、他の項目をクリックすると自動的に前の項目が閉じる仕様になっています。
See the Pen アコーディオン 自動で閉じる by yuya o (@yuya-o) on CodePen.
実際に触ってみることで、これから自分がどんな機能を作るのかイメージが掴めますね！
では、次のセクションから実装の流れをステップごとに解説していきます。
手順
まずは、アコーディオンメニューの構造をHTMLで作成します。
See the Pen アコーディオン 自動で閉じる STEP1 by yuya o (@yuya-o) on CodePen.
ここがポイント！
- アコーディオンの1セットは
<li>タグの中にまとめられています。 .btnがクリックできる見出し部分で、そのすぐ下に.menuという開閉する内容部分があります。span.iconとspan.icon2は、＋や−のようなアイコンを作るために使います。
次に、アコーディオンのデザインを整えていきます。
See the Pen アコーディオン 自動で閉じる STEP2 by yuya o (@yuya-o) on CodePen.
ここがポイント！
.btnでクリック部分をデザインし、中に＋マーク用のspanを絶対配置しています。.menuは初期状態でheight: 0に設定されていて、中身が見えないようになっています。.menu.openをつけるとheight: 80pxになり、ふわっと中身が表示されます。.icon2の回転で、アイコンが「＋ → －」に切り替わるアニメーションを演出しています。
最後に、jQueryを使ってクリックでメニューが開閉するようにします。
また、他のメニューを自動で閉じる処理も含まれています。
See the Pen アコーディオン 自動で閉じる by yuya o (@yuya-o) on CodePen.
ここがポイント！
.btnをクリックしたときの動きを定義しています。- 開いている
.btnがあれば閉じ、クリックされたものだけを開きます。 .next('.menu')で、クリックされた.btnのすぐ下にある.menu要素を選んでいます。
さいごに
今回は、jQueryを使ってアコーディオンメニューを作る方法をご紹介しました。
クリックするとメニューが開いて、他のメニューは自動で閉じる、そんなシンプルだけど実用的な動き、実装できましたか？
このアコーディオンの仕組みは、FAQページやサイドメニュー、プロフィールの詳細表示など、いろいろな場面で活用できます。
最初はjQueryの書き方に戸惑うかもしれませんが、「なにがどう動いているか」を少しずつ理解していけば、必ず自信につながります。
