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

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

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

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

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

「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな~」

「jQueryってなに?JavaScriptのらいぶらり?は?」

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

ではいってみよう!

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

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

Webサイトでよく見かけるクリックやタップをすると

うにょ〜んと中身が出てきて

もう一度クリックやタップをすると

しゅ〜んと中身が閉じていく機能のことだよ。

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

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

ファイルのダウンロードはこちら

CSSで色分けしているので不要な色は適宜削除してご使用ください。

jQueryを読み込む

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

まずはjQueryを読み込もう!

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

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

jQuery公式サイトはこちら

ダウンロードしなくても以下のコードを記述してもOKだよ!

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

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

読み込みが完了したら

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

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




サンプルデモの解説

1.複数開閉できる

HTML

CSS

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

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

7.多階層のメニュー

HTML

CSS

jQuery

サンプルデモを見る

HTMLを多階層用に変更して、jQueryでそれぞれの階層のp要素をクリックした時、開いたり閉じたりするようにslideToggleで命令しているよ

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

HTML

CSS

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

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

最後に

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

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

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

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

jQuery 日本語リファレンス

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

Twitter
@michelgorilla

Facebook
ミケランジェロ

それじゃ、また今度ね!

プログラミングカテゴリの最新記事