プログラミング

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

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

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

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

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

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

ではいってみよう!

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

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

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

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

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

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

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

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

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

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

jQueryを読み込む

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

まずはjQueryを読み込もう!

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

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

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

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

jQuery公式サイトはこちら

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

CDNを使って導入する

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

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

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

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

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

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

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




サンプルデモの解説

1.複数開閉できる

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


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

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

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

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


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

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

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

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


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

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

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

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


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

サンプルデモ2のHTMLの一番目のul要素のclassにopenを追加してCSSdisplay: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と同じだけど、CSSwidthで横幅指定、floatで要素を詰める事で整形して、jQueryanimatewidthで横幅の動きを命令しているよ。
hideは閉じる、toggleは開いたり閉じたりする。

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

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


サンプルデモを見る

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

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

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


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

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

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

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


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

サンプルデモ9とHTMLは同じで、CSSで縦と横の調整をしているよ。jQueryも今まで使ったslideToggleanimateなどを使って動きを命令しているよ。

最後に

これでアコーディオンメニューの説明は終わりだよ。

jQueryって難しそうだけどこう見ると意外と簡単だよね。

もっと詳しく知りたい人は

jQueryのリファレンスサイトがあるから確認してみてね。

jQuery 日本語リファレンス

もし、実装できないとか、おかしいコードとかあれば連絡待ってるよ!

Twitter
@michelgorilla

Facebook
ミケランジェロ

それじゃ、また今度ね!

-プログラミング
-, , , , ,

© 2021 ジャングルオーシャン