どうも、ジャングルオーシャンのミケです。
今日はjQueryで実装するアコーディオンメニューのご紹介です。
簡単すぎてあっという間に実装できてしまうので
「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」
「jQueryってなに？JavaScriptのらいぶらり？は？」
と思ってるそこのあなた！ぜひ見ていってください！
ではいってみよう！
アコーディオンメニューとは
アコーディオンメニューってなんだよって人の為に説明するね。
Webサイトでよく見かけるクリックやタップをすると
うにょ〜んと中身が出てきて
もう一度クリックやタップをすると
しゅ〜んと中身が閉じていく機能のことだよ。
具体的なイメージは用意したサンプルデモページを見てね。
CSSで色分けしているので不要な色は適宜削除してご使用ください。
jQueryを読み込む
アコーディオンメニューを早く実装させたい！っていう気持ちはわかるけど
まずはjQueryを読み込もう！
本体を公式サイトからダウンロードしてね。
ダウンロードが完了したらそのファイルをHTMLファイルにscriptタグで読み込もう！
ダウンロードしなくても以下のコードを記述してもOKだよ！
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
記事公開時点でのjQueryのバージョンを読み込ませているから
バージョンは公式サイトで確認して修正してね。
読み込みが完了したら
いよいよjQueryでアコーディオンメニューを実装していくよ！
用意したサンプルデモを見ながら解説していくね。
サンプルデモの解説
1.複数開閉できる
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="accordion1"> <li> <p class="ac1">アコーディオン１</p> <ul class="inner"> <li class="content1-1">コンテンツ１</li> <li class="content1-2">コンテンツ２</li> <li class="content1-3">コンテンツ３</li> </ul> </li> <li> <p class="ac2">アコーディオン２</p> <ul class="inner"> <li class="content2-1">コンテンツ１</li> <li class="content2-2">コンテンツ２</li> <li class="content2-3">コンテンツ３</li> </ul> </li> <li> <p class="ac3">アコーディオン３</p> <ul class="inner"> <li class="content3-1">コンテンツ１</li> <li class="content3-2">コンテンツ２</li> <li class="content3-3">コンテンツ３</li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.accordion1 {text-align: center;} .accordion1 .inner {display: none;} .accordion1 p{cursor: pointer; padding: 10px;} .accordion1 p.ac1{background: #F50057;} .accordion1 p.ac2{background: #FFEA00;} .accordion1 p.ac3{background: #64DD17;} .accordion1 .inner li{padding: 10px 0;} .accordion1 .inner li.content1-1{background: #F48FB1;} .accordion1 .inner li.content1-2{background: #F8BBD0;} .accordion1 .inner li.content1-3{background: #FCE4EC;} .accordion1 .inner li.content2-1{background: #FFF59D;} .accordion1 .inner li.content2-2{background: #FFF9C4;} .accordion1 .inner li.content2-3{background: #FFFDE7;} .accordion1 .inner li.content3-1{background: #C5E1A5;} .accordion1 .inner li.content3-2{background: #DCEDC8;} .accordion1 .inner li.content3-3{background: #F1F8E9;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ //.accordion1の中のp要素がクリックされたら $('.accordion1 p').click(function(){ //クリックされた.accordion1の中のp要素に隣接するul要素が開いたり閉じたりする。 $(this).next('ul').slideToggle(); }); }); |
jQueryのslideToggleは指定した要素が開いていたら閉じる、閉じていたら開くという便利なものだよ
2.一個開けると他は閉じる
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="accordion2"> <li> <p class="ac1">アコーディオン１</p> <ul class="inner"> <li class="content1-1">コンテンツ１</li> <li class="content1-2">コンテンツ２</li> <li class="content1-3">コンテンツ３</li> </ul> </li> <li> <p class="ac2">アコーディオン２</p> <ul class="inner"> <li class="content2-1">コンテンツ１</li> <li class="content2-2">コンテンツ２</li> <li class="content2-3">コンテンツ３</li> </ul> </li> <li> <p class="ac3">アコーディオン３</p> <ul class="inner"> <li class="content3-1">コンテンツ１</li> <li class="content3-2">コンテンツ２</li> <li class="content3-3">コンテンツ３</li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.accordion2 {text-align: center;} .accordion2 .inner {display: none;} .accordion2 p{cursor: pointer; padding: 10px;} .accordion2 p.ac1{background: #F50057;} .accordion2 p.ac2{background: #FFEA00;} .accordion2 p.ac3{background: #64DD17;} .accordion2 .inner li{padding: 10px 0;} .accordion2 .inner li.content1-1{background: #F48FB1;} .accordion2 .inner li.content1-2{background: #F8BBD0;} .accordion2 .inner li.content1-3{background: #FCE4EC;} .accordion2 .inner li.content2-1{background: #FFF59D;} .accordion2 .inner li.content2-2{background: #FFF9C4;} .accordion2 .inner li.content2-3{background: #FFFDE7;} .accordion2 .inner li.content3-1{background: #C5E1A5;} .accordion2 .inner li.content3-2{background: #DCEDC8;} .accordion2 .inner li.content3-3{background: #F1F8E9;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function(){ //.accordion2の中のp要素がクリックされたら $('.accordion2 p').click(function(){ //クリックされた.accordion2の中のp要素に隣接する.accordion2の中の.innerを開いたり閉じたりする。 $(this).next('.accordion2 .inner').slideToggle(); //クリックされた.accordion2の中のp要素以外の.accordion2の中のp要素に隣接する.accordion2の中の.innerを閉じる $('.accordion2 p').not($(this)).next('.accordion2 .inner').slideUp(); }); }); |
jQueryのslideUpの記述を追加したから開くのは一個だけになったね
3.一番目を開けておく（複数開閉できる）
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="accordion3"> <li> <p class="ac1">アコーディオン１</p> <ul class="inner open"> <li class="content1-1">コンテンツ１</li> <li class="content1-2">コンテンツ２</li> <li class="content1-3">コンテンツ３</li> </ul> </li> <li> <p class="ac2">アコーディオン２</p> <ul class="inner"> <li class="content2-1">コンテンツ１</li> <li class="content2-2">コンテンツ２</li> <li class="content2-3">コンテンツ３</li> </ul> </li> <li> <p class="ac3">アコーディオン３</p> <ul class="inner"> <li class="content3-1">コンテンツ１</li> <li class="content3-2">コンテンツ２</li> <li class="content3-3">コンテンツ３</li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.accordion3 {text-align: center;} .accordion3 .inner {display: none;} .accordion3 .inner.open {display: block;} .accordion3 p{cursor: pointer; padding: 10px;} .accordion3 p.ac1{background: #F50057;} .accordion3 p.ac2{background: #FFEA00;} .accordion3 p.ac3{background: #64DD17;} .accordion3 .inner li{padding: 10px 0;} .accordion3 .inner li.content1-1{background: #F48FB1;} .accordion3 .inner li.content1-2{background: #F8BBD0;} .accordion3 .inner li.content1-3{background: #FCE4EC;} .accordion3 .inner li.content2-1{background: #FFF59D;} .accordion3 .inner li.content2-2{background: #FFF9C4;} .accordion3 .inner li.content2-3{background: #FFFDE7;} .accordion3 .inner li.content3-1{background: #C5E1A5;} .accordion3 .inner li.content3-2{background: #DCEDC8;} .accordion3 .inner li.content3-3{background: #F1F8E9;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ //.accordion3の中のp要素がクリックされたら $('.accordion3 p').click(function(){ //クリックされた.accordion3の中のp要素に隣接するul要素が開いたり閉じたりする。 $(this).next('ul').slideToggle(); }); }); |
サンプルデモ1のHTMLにの一番目のul要素のclassにopenを追加してCSSでdisplay:block;にする事で一番目だけ開いた状態にしているよ
4.一番目だけ開けておく（一個開けると他は閉じる）
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="accordion4"> <li> <p class="ac1">アコーディオン１</p> <ul class="inner open"> <li class="content1-1">コンテンツ１</li> <li class="content1-2">コンテンツ２</li> <li class="content1-3">コンテンツ３</li> </ul> </li> <li> <p class="ac2">アコーディオン２</p> <ul class="inner"> <li class="content2-1">コンテンツ１</li> <li class="content2-2">コンテンツ２</li> <li class="content2-3">コンテンツ３</li> </ul> </li> <li> <p class="ac3">アコーディオン３</p> <ul class="inner"> <li class="content3-1">コンテンツ１</li> <li class="content3-2">コンテンツ２</li> <li class="content3-3">コンテンツ３</li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.accordion4 {text-align: center;} .accordion4 .inner {display: none;} .accordion4 .inner.open {display: block;} .accordion4 p{cursor: pointer; padding: 10px;} .accordion4 p.ac1{background: #F50057;} .accordion4 p.ac2{background: #FFEA00;} .accordion4 p.ac3{background: #64DD17;} .accordion4 .inner li{padding: 10px 0;} .accordion4 .inner li.content1-1{background: #F48FB1;} .accordion4 .inner li.content1-2{background: #F8BBD0;} .accordion4 .inner li.content1-3{background: #FCE4EC;} .accordion4 .inner li.content2-1{background: #FFF59D;} .accordion4 .inner li.content2-2{background: #FFF9C4;} .accordion4 .inner li.content2-3{background: #FFFDE7;} .accordion4 .inner li.content3-1{background: #C5E1A5;} .accordion4 .inner li.content3-2{background: #DCEDC8;} .accordion4 .inner li.content3-3{background: #F1F8E9;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function(){ //.accordion4の中のp要素がクリックされたら $('.accordion4 p').click(function(){ //クリックされた.accordion4の中のp要素に隣接する.accordion4の中の.innerを開いたり閉じたりする。 $(this).next('.accordion4 .inner').slideToggle(); //クリックされた.accordion4の中のp要素以外の.accordion4の中のp要素に隣接する.accordion4の中の.innerを閉じる $('.accordion4 p').not($(this)).next('.accordion4 .inner').slideUp(); }); }); |
サンプルデモ2のHTMLの一番目のul要素のclassにopenを追加してCSSでdisplay:block;にする事で一番目だけ開いた状態にしているよ
5.コンテンツに閉じるボタン追加（複数開閉できる）
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="accordion5"> <li> <p class="ac1">アコーディオン１</p> <ul class="inner"> <li class="content1-1">コンテンツ１<span class="close">閉じる</span></li> <li class="content1-2">コンテンツ２<span class="close">閉じる</span></li> <li class="content1-3">コンテンツ３<span class="close">閉じる</span></li> </ul> </li> <li> <p class="ac2">アコーディオン２</p> <ul class="inner"> <li class="content2-1">コンテンツ１<span class="close">閉じる</span></li> <li class="content2-2">コンテンツ２<span class="close">閉じる</span></li> <li class="content2-3">コンテンツ３<span class="close">閉じる</span></li> </ul> </li> <li> <p class="ac3">アコーディオン３</p> <ul class="inner"> <li class="content3-1">コンテンツ１<span class="close">閉じる</span></li> <li class="content3-2">コンテンツ２<span class="close">閉じる</span></li> <li class="content3-3">コンテンツ３<span class="close">閉じる</span></li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.accordion5 {text-align: center;} .accordion5 .inner {display: none;} .accordion5 p{cursor: pointer; padding: 10px;} .accordion5 p.ac1{background: #F50057;} .accordion5 p.ac2{background: #FFEA00;} .accordion5 p.ac3{background: #64DD17;} .accordion5 .inner li{padding: 10px 0; position: relative;} .accordion5 .inner li .close{padding: 4px 5px ;background: #fff;border:1px solid #f0f0f0; border-radius: 10px;position: absolute;top:6px;right: 10px; font-size: 14px; cursor: pointer;} .accordion5 .inner li.content1-1{background: #F48FB1;} .accordion5 .inner li.content1-2{background: #F8BBD0;} .accordion5 .inner li.content1-3{background: #FCE4EC;} .accordion5 .inner li.content2-1{background: #FFF59D;} .accordion5 .inner li.content2-2{background: #FFF9C4;} .accordion5 .inner li.content2-3{background: #FFFDE7;} .accordion5 .inner li.content3-1{background: #C5E1A5;} .accordion5 .inner li.content3-2{background: #DCEDC8;} .accordion5 .inner li.content3-3{background: #F1F8E9;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function(){ //.accordion5の中のp要素がクリックされたら $('.accordion5 p').click(function(){ //クリックされた.accordion5の中のp要素に隣接するul要素が開いたり閉じたりする。 $(this).next('ul').slideToggle(); }); //.closeがクリックされたら $('.close').click(function () { //クリックされた.closeの親要素の.accordion5の.innerを閉じる。 $(this).parents('.accordion5 .inner').slideUp(); }); }); |
サンプルデモ1のHTMLで、それぞれのコンテンツにclass=”close”を持ったspan要素を追加して、jQueryで.closeがクリックされたら閉じるという命令をしているよ
6.コンテンツに閉じるボタン追加（一個開けると他は閉じる）
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="accordion6"> <li> <p class="ac1">アコーディオン１</p> <ul class="inner"> <li class="content1-1">コンテンツ１<span class="close">閉じる</span></li> <li class="content1-2">コンテンツ２<span class="close">閉じる</span></li> <li class="content1-3">コンテンツ３<span class="close">閉じる</span></li> </ul> </li> <li> <p class="ac2">アコーディオン２</p> <ul class="inner"> <li class="content2-1">コンテンツ１<span class="close">閉じる</span></li> <li class="content2-2">コンテンツ２<span class="close">閉じる</span></li> <li class="content2-3">コンテンツ３<span class="close">閉じる</span></li> </ul> </li> <li> <p class="ac3">アコーディオン３</p> <ul class="inner"> <li class="content3-1">コンテンツ１<span class="close">閉じる</span></li> <li class="content3-2">コンテンツ２<span class="close">閉じる</span></li> <li class="content3-3">コンテンツ３<span class="close">閉じる</span></li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.accordion6 {text-align: center;} .accordion6 .inner {display: none;} .accordion6 p{cursor: pointer; padding: 10px;} .accordion6 p.ac1{background: #F50057;} .accordion6 p.ac2{background: #FFEA00;} .accordion6 p.ac3{background: #64DD17;} .accordion6 .inner li{padding: 10px 0; position: relative;} .accordion6 .inner li .close{padding: 4px 5px ;background: #fff;border:1px solid #f0f0f0; border-radius: 10px;position: absolute;top:6px;right: 10px; font-size: 14px; cursor: pointer;} .accordion6 .inner li.content1-1{background: #F48FB1;} .accordion6 .inner li.content1-2{background: #F8BBD0;} .accordion6 .inner li.content1-3{background: #FCE4EC;} .accordion6 .inner li.content2-1{background: #FFF59D;} .accordion6 .inner li.content2-2{background: #FFF9C4;} .accordion6 .inner li.content2-3{background: #FFFDE7;} .accordion6 .inner li.content3-1{background: #C5E1A5;} .accordion6 .inner li.content3-2{background: #DCEDC8;} .accordion6 .inner li.content3-3{background: #F1F8E9;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function(){ //.accordion6の中のp要素がクリックされたら $('.accordion6 p').click(function(){ //クリックされた.accordion6の中のp要素に隣接する.accordion6の中の.innerを開いたり閉じたりする。 $(this).next('.accordion6 .inner').slideToggle(); //クリックされた.accordion6の中のp要素以外の.accordion6の中のp要素に隣接する.accordion6の中の.innerを閉じる $('.accordion6 p').not($(this)).next('.accordion6 .inner').slideUp(); }); //.closeがクリックされたら $('.close').click(function () { //クリックされた.closeの親要素の.accordion6の.innerを閉じる。 $(this).parents('.accordion6 .inner').slideUp(); }); }); |
サンプルデモ2のHTMLで、それぞれのコンテンツにclass=”close”を持ったspan要素を追加して、jQueryで.closeがクリックされたら閉じるという命令をしているよ
7.多階層のメニュー
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<ul class="accordion7"> <li> <p class="ac1">アコーディオン１</p> <ul class="inner"> <li class="content1-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content1-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content1-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> <li> <p class="ac2">アコーディオン２</p> <ul class="inner"> <li class="content2-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content2-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content2-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> <li> <p class="ac3">アコーディオン３</p> <ul class="inner"> <li class="content3-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content3-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content3-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.accordion7 {text-align: center;} .accordion7 .inner {display: none;} .accordion7 .inner li ul{display: none;} .accordion7 p{cursor: pointer; padding: 10px;} .accordion7 p.ac1{background: #F50057;} .accordion7 p.ac2{background: #FFEA00;} .accordion7 p.ac3{background: #64DD17;} .accordion7 .inner li ul li{padding: 10px 0;} .accordion7 .inner li > p{cursor: pointer;} .accordion7 .inner li.content1-1{background: #F48FB1;} .accordion7 .inner li.content1-1 li:nth-child(1){background: #f5a9c2;} .accordion7 .inner li.content1-1 li:nth-child(2){background: #f5c1d3;} .accordion7 .inner li.content1-1 li:nth-child(3){background: #f5dae3;} .accordion7 .inner li.content1-2{background: #F8BBD0;} .accordion7 .inner li.content1-2 li:nth-child(1){background: #f7cbda;} .accordion7 .inner li.content1-2 li:nth-child(2){background: #f7dce6;} .accordion7 .inner li.content1-2 li:nth-child(3){background: #f7edf1;} .accordion7 .inner li.content1-3{background: #FCE4EC;} .accordion7 .inner li.content1-3 li:nth-child(1){background: #fcebf1;} .accordion7 .inner li.content1-3 li:nth-child(2){background: #fcf2f6;} .accordion7 .inner li.content1-3 li:nth-child(3){background: #fcfafb;} .accordion7 .inner li.content2-1{background: #FFF59D;} .accordion7 .inner li.content2-1 li:nth-child(1){background: #fff8b8;} .accordion7 .inner li.content2-1 li:nth-child(2){background: #fffad1;} .accordion7 .inner li.content2-1 li:nth-child(3){background: #fffdeb;} .accordion7 .inner li.content2-2{background: #FFF9C4;} .accordion7 .inner li.content2-2 li:nth-child(1){background: #fffbd6;} .accordion7 .inner li.content2-2 li:nth-child(2){background: #fffde8;} .accordion7 .inner li.content2-2 li:nth-child(3){background: #fffefa;} .accordion7 .inner li.content2-3{background: #fffbd9;} .accordion7 .inner li.content2-3 li:nth-child(1){background: #fffce3;} .accordion7 .inner li.content2-3 li:nth-child(2){background: #fffded;} .accordion7 .inner li.content2-3 li:nth-child(3){background: #fffef7;} .accordion7 .inner li.content3-1{background: #C5E1A5;} .accordion7 .inner li.content3-1 li:nth-child(1){background: #cde0b6;} .accordion7 .inner li.content3-1 li:nth-child(2){background: #d5e0c8;} .accordion7 .inner li.content3-1 li:nth-child(3){background: #dde0da;} .accordion7 .inner li.content3-2{background: #DCEDC8;} .accordion7 .inner li.content3-2 li:nth-child(1){background: #e1edd3;} .accordion7 .inner li.content3-2 li:nth-child(2){background: #e7eddf;} .accordion7 .inner li.content3-2 li:nth-child(3){background: #ecedeb;} .accordion7 .inner li.content3-3{background: #F1F8E9;} .accordion7 .inner li.content3-3 li:nth-child(1){background: #f3f7ed;} .accordion7 .inner li.content3-3 li:nth-child(2){background: #f5f7f2;} .accordion7 .inner li.content3-3 li:nth-child(3){background: #f7f7f7;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function(){ //.accordion7の中のp要素がクリックされたら $('.accordion7 p').click(function(){ //クリックされた.accordion7の中のp要素に隣接するul要素が開いたり閉じたりする。 $(this).next('ul').slideToggle(); }); //.accordion7の中の.innerの中のli要素の中のp要素がクリックされたら $('.accordion7 .inner li p').click(function() { //クリックされた.accordion7の中の.innerの中のli要素の中のp要素の子要素のul要素が開いたり閉じたりする。 $(this).children('ul').slideToggle(); }); }); |
HTMLを多階層用に変更して、jQueryでそれぞれの階層のp要素をクリックした時、開いたり閉じたりするようにslideToggleで命令しているよ
8.横に開くアコーディオンメニュー
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="accordion8"> <li> <p class="ac1">アコーディオン１</p> <ul class="inner"> <li class="content1-1">コンテンツ１</li> <li class="content1-2">コンテンツ２</li> <li class="content1-3">コンテンツ３</li> </ul> </li> <li> <p class="ac2">アコーディオン２</p> <ul class="inner"> <li class="content2-1">コンテンツ１</li> <li class="content2-2">コンテンツ２</li> <li class="content2-3">コンテンツ３</li> </ul> </li> <li> <p class="ac3">アコーディオン３</p> <ul class="inner"> <li class="content3-1">コンテンツ１</li> <li class="content3-2">コンテンツ２</li> <li class="content3-3">コンテンツ３</li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.accordion8 {text-align: center;} .accordion8 {height: 300px; max-width: 1000px; margin: 0 auto; overflow: hidden;} .accordion8 li p { float: left; cursor: pointer;} .accordion8 p.ac1, .accordion8 p.ac2, .accordion8 p.ac3{width: 20%; height: 300px;} .accordion8 li .inner { float: left; width: 400px; height: 300px;display: none; margin: 0;} .accordion8 p{cursor: pointer;} .accordion8 p.ac1{background: #F50057;} .accordion8 p.ac2{background: #FFEA00;} .accordion8 p.ac3{background: #64DD17;} .accordion8 li .inner{float: left; width: 40%; height: 300px; display: none; margin: 0;} .accordion8 .inner > li{float: left; width: calc(100% / 3); height: 300px;} .accordion8 .inner li.content1-1{background: #F48FB1;} .accordion8 .inner li.content1-2{background: #F8BBD0;} .accordion8 .inner li.content1-3{background: #FCE4EC;} .accordion8 .inner li.content2-1{background: #FFF59D;} .accordion8 .inner li.content2-2{background: #FFF9C4;} .accordion8 .inner li.content2-3{background: #FFFDE7;} .accordion8 .inner li.content3-1{background: #C5E1A5;} .accordion8 .inner li.content3-2{background: #DCEDC8;} .accordion8 .inner li.content3-3{background: #F1F8E9;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { //.accordion8の中のli要素の中のp要素がクリックされた時 $('.accordion8 li p').click(function() { //クリックされた.accordion8の中のli要素の中のp要素以外のp要素に隣接する要素の横幅を閉じる。 $('.accordion8 li p').not($(this)).next().animate({width:'hide'}); //クリックされた.accordion8の中のli要素の中のp要素に隣接する要素の横幅を開いたり閉じたりする。 $(this).next().animate({width:'toggle'}); }); }); |
HTMLはサンプルデモ1と同じだけど、CSSのwidthで横幅指定、floatで要素を詰める事で整形して、jQueryのanimateのwidthで横幅の動きを命令しているよ。
hideは閉じる、toggleは開いたり閉じたりする。
hideは閉じる、toggleは開いたり閉じたりする。
9.横に開くアコーディオンの中に縦に開くアコーディオン
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<ul class="accordion9"> <li> <p class="ac1 open1">アコーディオン１</p> <ul class="inner"> <li class="content1-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content1-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content1-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> <li> <p class="ac2 open1">アコーディオン２</p> <ul class="inner"> <li class="content2-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content2-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content2-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> <li> <p class="ac3 open1">アコーディオン３</p> <ul class="inner"> <li class="content3-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content3-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content3-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.accordion9 {text-align: center;} .accordion9 {height: 300px; max-width: 1000px; margin: 0 auto; overflow: hidden;} .accordion9 li p { float: left; width: 20%; cursor: pointer;} .accordion9 li .inner { float: left; width: 40%; height: 300px;display: none; margin: 0;} .accordion9 .inner {display: none;} .accordion9 .inner li ul{display: none;clear: both; height: 80%;} .accordion9 p{cursor: pointer;} .accordion9 p.ac1, .accordion9 p.ac2, .accordion9 p.ac3{width: 20%; height: 300px;} .accordion9 p.ac1{background: #F50057;} .accordion9 p.ac2{background: #FFEA00;} .accordion9 p.ac3{background: #64DD17;} .accordion9 .inner > li {float: left; width: calc(100% / 3); height: 300px;} .accordion9 .inner li ul li{height: calc(100% / 3);box-sizing: border-box;} .accordion9 .inner li > p{cursor: pointer; width: 100%; height:20%;} .accordion9 .inner li.content1-1{background: #F48FB1;} .accordion9 .inner li.content1-1 li:nth-child(1){background: #f5a9c2;} .accordion9 .inner li.content1-1 li:nth-child(2){background: #f5c1d3;} .accordion9 .inner li.content1-1 li:nth-child(3){background: #f5dae3;} .accordion9 .inner li.content1-2{background: #F8BBD0;} .accordion9 .inner li.content1-2 li:nth-child(1){background: #f7cbda;} .accordion9 .inner li.content1-2 li:nth-child(2){background: #f7dce6;} .accordion9 .inner li.content1-2 li:nth-child(3){background: #f7edf1;} .accordion9 .inner li.content1-3{background: #FCE4EC;} .accordion9 .inner li.content1-3 li:nth-child(1){background: #fcebf1;} .accordion9 .inner li.content1-3 li:nth-child(2){background: #fcf2f6;} .accordion9 .inner li.content1-3 li:nth-child(3){background: #fcfafb;} .accordion9 .inner li.content2-1{background: #FFF59D;} .accordion9 .inner li.content2-1 li:nth-child(1){background: #fff8b8;} .accordion9 .inner li.content2-1 li:nth-child(2){background: #fffad1;} .accordion9 .inner li.content2-1 li:nth-child(3){background: #fffdeb;} .accordion9 .inner li.content2-2{background: #FFF9C4;} .accordion9 .inner li.content2-2 li:nth-child(1){background: #fffbd6;} .accordion9 .inner li.content2-2 li:nth-child(2){background: #fffde8;} .accordion9 .inner li.content2-2 li:nth-child(3){background: #fffefa;} .accordion9 .inner li.content2-3{background: #fffbd9;} .accordion9 .inner li.content2-3 li:nth-child(1){background: #fffce3;} .accordion9 .inner li.content2-3 li:nth-child(2){background: #fffded;} .accordion9 .inner li.content2-3 li:nth-child(3){background: #fffef7;} .accordion9 .inner li.content3-1{background: #C5E1A5;} .accordion9 .inner li.content3-1 li:nth-child(1){background: #cde0b6;} .accordion9 .inner li.content3-1 li:nth-child(2){background: #d5e0c8;} .accordion9 .inner li.content3-1 li:nth-child(3){background: #dde0da;} .accordion9 .inner li.content3-2{background: #DCEDC8;} .accordion9 .inner li.content3-2 li:nth-child(1){background: #e1edd3;} .accordion9 .inner li.content3-2 li:nth-child(2){background: #e7eddf;} .accordion9 .inner li.content3-2 li:nth-child(3){background: #ecedeb;} .accordion9 .inner li.content3-3{background: #F1F8E9;} .accordion9 .inner li.content3-3 li:nth-child(1){background: #f3f7ed;} .accordion9 .inner li.content3-3 li:nth-child(2){background: #f5f7f2;} .accordion9 .inner li.content3-3 li:nth-child(3){background: #f7f7f7;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function() { //.accordion9の中のli要素の中の.open1がクリックされた時 $('.accordion9 li .open1').click(function() { //クリックされた.accordion9の中のli要素の中の.open1の次の要素の横幅を開いたり閉じたりする。 $(this).next().animate({width:'toggle'}); //クリックされた.accordion9の中のli要素の中の.open1ではない.open1の次の要素の横幅を閉じる。 $('.accordion9 li .open1').not($(this)).next().animate({width:'hide'}); }); //.accordion9の中の.innerの中のli要素の中のp要素がクリックされた時 $('.accordion9 .inner li p').click(function() { //クリックされた.accordion9の中の.innerの中のli要素の中のp要素に隣接するul要素を開いたり閉じたりする。 $(this).next('ul').slideToggle(); }); }); |
サンプルデモ8のHTMLのコンテンツの中にさらにコンテンツを入れてそれぞれクリックした時に、jQueryのslideToggleで開いたり閉じたりするようにしているよ。
.accordion9 liの中のp要素が階層毎にあるから区別するためにclassにopen1を追加しているよ。
.accordion9 liの中のp要素が階層毎にあるから区別するためにclassにopen1を追加しているよ。
10.縦に開くアコーディオンの中に横に開くアコーディオン
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<ul class="accordion10"> <li> <p class="ac1 open1">アコーディオン１</p> <ul class="inner"> <li class="content1-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content1-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content1-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> <li> <p class="ac2 open1">アコーディオン２</p> <ul class="inner"> <li class="content2-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content2-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content2-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> <li> <p class="ac3 open1">アコーディオン３</p> <ul class="inner"> <li class="content3-1"> <p>コンテンツ１</p> <ul> <li>コンテンツ１－１</li> <li>コンテンツ１－２</li> <li>コンテンツ１－３</li> </ul> </li> <li class="content3-2"> <p>コンテンツ２</p> <ul> <li>コンテンツ２－１</li> <li>コンテンツ２－２</li> <li>コンテンツ２－３</li> </ul> </li> <li class="content3-3"> <p>コンテンツ３</p> <ul> <li>コンテンツ３－１</li> <li>コンテンツ３－２</li> <li>コンテンツ３－３</li> </ul> </li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.accordion10 {text-align: center;} .accordion10 .inner {display: none;overflow: hidden; width: 100%;} .accordion10 .inner li ul{float: left; width: 40%; height: 300px; display: none; margin: 0;} .accordion10 p{cursor: pointer; padding: 10px; box-sizing: border-box;} .accordion10 p.ac1{background: #F50057;} .accordion10 p.ac2{background: #FFEA00;} .accordion10 p.ac3{background: #64DD17;} .accordion10 .inner li ul li{ float: left; width: calc(100% / 3); height: 300px;} .accordion10 .inner li > p{cursor: pointer; width: 20%; height: 300px; float: left;} .accordion10 .inner li.content1-1 p{background: #F48FB1;} .accordion10 .inner li.content1-1 li:nth-child(1){background: #f5a9c2;} .accordion10 .inner li.content1-1 li:nth-child(2){background: #f5c1d3;} .accordion10 .inner li.content1-1 li:nth-child(3){background: #f5dae3;} .accordion10 .inner li.content1-2 p{background: #F8BBD0;} .accordion10 .inner li.content1-2 li:nth-child(1){background: #f7cbda;} .accordion10 .inner li.content1-2 li:nth-child(2){background: #f7dce6;} .accordion10 .inner li.content1-2 li:nth-child(3){background: #f7edf1;} .accordion10 .inner li.content1-3 p{background: #FCE4EC;} .accordion10 .inner li.content1-3 li:nth-child(1){background: #fcebf1;} .accordion10 .inner li.content1-3 li:nth-child(2){background: #fcf2f6;} .accordion10 .inner li.content1-3 li:nth-child(3){background: #fcfafb;} .accordion10 .inner li.content2-1 p{background: #FFF59D;} .accordion10 .inner li.content2-1 li:nth-child(1){background: #fff8b8;} .accordion10 .inner li.content2-1 li:nth-child(2){background: #fffad1;} .accordion10 .inner li.content2-1 li:nth-child(3){background: #fffdeb;} .accordion10 .inner li.content2-2 p{background: #FFF9C4;} .accordion10 .inner li.content2-2 li:nth-child(1){background: #fffbd6;} .accordion10 .inner li.content2-2 li:nth-child(2){background: #fffde8;} .accordion10 .inner li.content2-2 li:nth-child(3){background: #fffefa;} .accordion10 .inner li.content2-3 p{background: #fffbd9;} .accordion10 .inner li.content2-3 li:nth-child(1){background: #fffce3;} .accordion10 .inner li.content2-3 li:nth-child(2){background: #fffded;} .accordion10 .inner li.content2-3 li:nth-child(3){background: #fffef7;} .accordion10 .inner li.content3-1 p{background: #C5E1A5;} .accordion10 .inner li.content3-1 li:nth-child(1){background: #cde0b6;} .accordion10 .inner li.content3-1 li:nth-child(2){background: #d5e0c8;} .accordion10 .inner li.content3-1 li:nth-child(3){background: #dde0da;} .accordion10 .inner li.content3-2 p{background: #DCEDC8;} .accordion10 .inner li.content3-2 li:nth-child(1){background: #e1edd3;} .accordion10 .inner li.content3-2 li:nth-child(2){background: #e7eddf;} .accordion10 .inner li.content3-2 li:nth-child(3){background: #ecedeb;} .accordion10 .inner li.content3-3 p{background: #F1F8E9;} .accordion10 .inner li.content3-3 li:nth-child(1){background: #f3f7ed;} .accordion10 .inner li.content3-3 li:nth-child(2){background: #f5f7f2;} .accordion10 .inner li.content3-3 li:nth-child(3){background: #f7f7f7;} |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(function() { //.accordion10の中のli要素の.open1がクリックされた時 $('.accordion10 li .open1').click(function() { //クリックされた.accordion10の中のli要素の.open1に隣接する要素を開いたり閉じたりする。 $(this).next().slideToggle(); //クリックされた.accordion10の中のp要素以外の.accordion10の中のp要素に隣接する.accordion2の中の.innerを閉じる $('.accordion10 p').not($(this)).next('.accordion10 .inner').slideUp(); }); //.accordion10の中の.innerの中のli要素の中のp要素がクリックされた時 $('.accordion10 .inner li p').click(function() { //クリックされた.accordion10の中の.innerの中のli要素の中のp要素以外のp要素に隣接する要素の横幅を閉じる。 $('.accordion10 .inner li p').not($(this)).next().animate({width:'hide'}); //クリックされた.accordion10の中の.innerの中のli要素の中のp要素に隣接するul要素の横幅を開いたり閉じたりする。 $(this).next('ul').animate({width:'toggle'}); }); }); |
サンプルデモ9とHTMLは同じで、CSSで縦と横の調整をしているよ。jQueryも今まで使ったslideToggleやanimateなどを使って動きを命令しているよ。
最後に
これでアコーディオンメニューの説明は終わりだよ。
jQueryって難しそうだけどこう見ると意外と簡単だよね。
もっと詳しく知りたい人は
jQueryのリファレンスサイトがあるから確認してみてね。
もし、実装できないとか、おかしいコードとかあれば連絡待ってるよ！
Twitter
@michelgorilla
Facebook
ミケランジェロ
それじゃ、また今度ね！
