【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選！

どうも、ジャングルオーシャンのミケです。

今日はjQueryで実装するアコーディオンメニューのご紹介だよ。

簡単すぎてあっという間に実装できてしまうので

「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」

と思ってるそこのあなた！ぜひ見ていってね！

ではいってみよう！

アコーディオンメニューとは

アコーディオンメニューってなんだよって人の為に説明するね。

クリックやタップをするとうにょ〜んと中身が出てきて

もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。

Webサイトでよく見かけるアニメーションだよね。

要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。

アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。

具体的なイメージは用意したサンプルデモページを見てみてね。

サンプルデモページはこちら

ファイルのダウンロードはこちら
※CSSで色分けしているので不要な色は適宜削除してご使用ください。

jQueryを読み込む

アコーディオンメニューを早く実装させたい！っていう気持ちはわかるけど

まずはjQueryを読み込もう！

jQueryを読み込む方法を2つ紹介するので好きな方で導入してみてね。

ファイルをダウンロードして導入する

jQueryの本体を公式サイトからダウンロードしてね。

ダウンロードが完了したらそのファイルをHTMLファイルにscriptタグで読み込もう！

jQuery公式サイトはこちら

ダウンロードができたらファイルを読み込ませるコードを書こう！

<script src="js/jquery-3.5.1.min.js"></script>

1	<script src="js/jquery-3.5.1.min.js"></script>

CDNを使って導入する

ダウンロードをしなくてもCDNを使って導入することもできるよ。

以下のコードを記述してもOKだよ！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

記事公開時点でのjQueryのバージョンを読み込ませているから

バージョンは公式サイトで確認して修正してね。

jQueryの読み込みが完了したら

いよいよjQueryでアコーディオンメニューを実装していくよ！

用意したサンプルデモを見ながら解説していくね。

サンプルデモの解説

1.複数開閉できる

See the Pen
by mike (@michelangelojo)
on CodePen.

サンプルデモページを見る

jQueryのslideToggleは指定した要素が開いていたら閉じる、閉じていたら開くという便利なものだよ

2.一個開けると他は閉じる

See the Pen
accordion2 by mike (@michelangelojo)
on CodePen.

サンプルデモページで見る

jQueryのslideUpの記述を追加したから開くのは一個だけになったね

3.一番目を開けておく（複数開閉できる）

See the Pen
by mike (@michelangelojo)
on CodePen.

サンプルデモページで見る

サンプルデモ1のHTMLの一番目のul要素のclassにopenを追加してCSSでdisplay:block;にする事で一番目だけ開いた状態にしているよ

4.一番目だけ開けておく（一個開けると他は閉じる）

See the Pen
by mike (@michelangelojo)
on CodePen.

サンプルデモページで見る

サンプルデモ2のHTMLの一番目のul要素のclassにopenを追加してCSSでdisplay:block;にする事で一番目だけ開いた状態にしているよ

5.コンテンツに閉じるボタン追加（複数開閉できる）

See the Pen
by mike (@michelangelojo)
on CodePen.

サンプルデモページで見る

サンプルデモ1のHTMLで、それぞれのコンテンツにclass="close"を持ったspan要素を追加して、jQueryで.closeがクリックされたら閉じるという命令をしているよ

6.コンテンツに閉じるボタン追加（一個開けると他は閉じる）

See the Pen
by mike (@michelangelojo)
on CodePen.

サンプルデモページで見る

サンプルデモ2のHTMLで、それぞれのコンテンツにclass="close"を持ったspan要素を追加して、jQueryで.closeがクリックされたら閉じるという命令をしているよ

7.多階層のメニュー

See the Pen
by mike (@michelangelojo)
on CodePen.

サンプルデモページで見る

HTMLはサンプルデモ1と同じだけど、CSSのwidthで横幅指定、floatで要素を詰める事で整形して、jQueryのanimateのwidthで横幅の動きを命令しているよ。
hideは閉じる、toggleは開いたり閉じたりする。

8.横に開くアコーディオンメニュー

See the Pen
by mike (@michelangelojo)
on CodePen.

サンプルデモを見る

9.横に開くアコーディオンの中に縦に開くアコーディオン

See the Pen
by mike (@michelangelojo)
on CodePen.

サンプルデモページで見る

サンプルデモ8のHTMLのコンテンツの中にさらにコンテンツを入れてそれぞれクリックした時に、jQueryのslideToggleで開いたり閉じたりするようにしているよ。
.accordion9 liの中のp要素が階層毎にあるから区別するためにclassにopen1を追加しているよ。