こんにちは。
息子がほっぺにチューしてくれたとき、「お母さんのお鼻に‘ツブツブ’がついてるよ」と真顔で言われショックを受けている、アラフォーシンママの あき です。
今回は、アコーディオンメニューのおはなし。
メニューボタンを押したら、隠れていたボタンが表示されるようなメニューの表示の事を、アコーディオンメニューと言いますね。
アコーディオンメニューの作り方はいろいろありますが、簡単に書けるjQueryで作るという方が多いのではないかと思います。
でも実は、素のJavaScriptでも意外と簡単に書くことができるんです。
今回は、JavaScriptを使ったアコーディオンメニューの作り方をご紹介します！
JavaScriptを使ったアコーディオンメニューの動作デモ
See the Pen
Javascript_accordion by akiyo (@akiyohayakawa)
on CodePen.
こんな感じですね。
実際のコード
では実際に記述するコードを見ていきましょう。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<section> <div class="accordion"> <p class="menu js-menu">メニュー1</p> <div class="contents">コンテンツ1</div> <p class="menu js-menu">メニュー2</p> <div class="contents">コンテンツ2</div> <p class="menu js-menu">メニュー3</p> <div class="contents">コンテンツ3</div> </div> </section> |
|
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 |
* { margin: 0; padding: 0; } section { margin-top: 30px; } .accordion { width: 200px; margin: 0 auto; } .menu { background-color: purple; color: white; font-size: 18px; padding: 10px; text-align: center; cursor: pointer; user-select: none; } .menu:hover, .menu:active, .menu.is-active { background-color: black; } .contents { text-align: center; line-height: 0; height: 0; overflow: hidden; opacity: 0; transition-duration: 0.4s; } .contents.is-open { border: 1px solid black; padding: 10px; line-height: normal; height: auto; opacity: 1; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> const menu = document.querySelectorAll(".js-menu"); function toggle() { const content = this.nextElementSibling; this.classList.toggle("is-active"); content.classList.toggle("is-open"); } for (let i = 0; i < menu.length; i++) { menu[i].addEventListener("click", toggle); } </script> |
JavaScriptのコード量、意外と少ないですね！
＜ 解説 ＞
では、JavaScriptのコードを解説していきます。
このコードでは、
・ クリックする要素 <p class="menu js-menu">メニュー1</p>
・ 展開される要素 <div class="contents">コンテンツ1</div>
となっています。
まずは、document.querySelectorAll を使って、クリックする要素であるjs-menuというクラスを取得します。（クリックする要素は３つあり、それらすべてを取得したいので querySelectorAll を使います。）
|
1 |
const menu = document.querySelectorAll(".js-menu"); |
次に、toggle関数を定義します。
|
1 |
function toggle() { |
toggle関数の中の処理としては、まず .nextElementSibling で this の隣の要素を取得します。(thisは .js-menu を指します)
|
1 |
const content = this.nextElementSibling; |
↓隣の要素なので、これですね。この contents というクラスを content に代入します。
|
1 |
<div class="contents">コンテンツ1</div> |
そして、
・ content すなわち contents には .classList.toggle で ”is-open” を指定
します。
|
1 2 |
this.classList.toggle("is-active"); content.classList.toggle("is-open"); |
こうすることで、
・ そのクラスが含まれていればクラスを削除、含まれていなければクラスを追加する
という動作が行われます。クラスを付けたり外したりしてくれるのが toggle ですね。
最後に、for文を使ってそれぞれの要素にクリックイベントをつくります。
|
1 2 3 |
for (let i = 0; i < menu.length; i++) { menu[i].addEventListener("click", toggle); } |
先にtoggle関数を定義しておき、後のfor文中のaddEventListener で呼び出すというかたちですね。
１つ１つ説明していくと少しややこしいですが、素のJavaScriptで書いても、書くコードの量は意外と少なく済むと感じた方も多いのではないでしょうか。
jQueryを使ったアコーディオンメニュー
JavaScriptでの書き方の一例を見たところで、jQueryで書く場合と比べてどれくらいの違いがあるのかを見てみましょう。
実際のコード
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<section> <div class="accordion"> <p class="menu js-menu">メニュー1</p> <div class="contents">コンテンツ1</div> <p class="menu js-menu">メニュー2</p> <div class="contents">コンテンツ2</div> <p class="menu js-menu">メニュー3</p> <div class="contents">コンテンツ3</div> </div> </section> |
JavaScriptの時と全く同じです。
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 |
* { margin: 0; padding: 0; } section { margin-top: 30px; } .accordion { width: 200px; margin: 0 auto; } .menu { background-color: purple; color: white; font-size: 18px; padding: 10px; text-align: center; cursor: pointer; user-select: none; } .menu:hover, .menu:active, .menu.is-active { background-color: black; } .contents { display: none; border: 1px solid black; padding: 10px; line-height: normal; height: auto; opacity: 1; text-align: center; } |
こちらもほぼ同じですが、 contentsクラスの部分だけ変えてあります。
jQuery
|
1 2 3 |
$(".js-menu").on("click", function () { $(this).next().slideToggle(); }); |
そしてjQuery。
めちゃくちゃシンプルになりました！
＜ 解説 ＞
まずは、 .on(“click” で、クリックイベントの処理をつくります。
|
1 |
$(".js-menu").on("click", function |
その後の $(this) は、 .js-menu のことを指しています。
そして、 .next() はその隣の要素を指します。
|
1 |
$(this).next().slideToggle(); |
つまり、この↓ contents というクラスの要素ですね。
|
1 |
<div class="contents">コンテンツ1</div> |
slideToggle()は、これを書くだけで slideUp() とslideDown() の動作を交互に行ってくれます。
まとめ
以上、JavaScriptでアコーディオンメニューを作る方法をご紹介しました。
jQueryで書く場合と比較もしてみましたが、意外と簡単に素のJavaScriptで書くことができますね！
とはいっても、比較してみるとやはり簡単なのはjQuery。
しかし、簡単にjQueryで書くのも良いですが、JavaScriptで書いてみて動きの基本を押さえておくことも大事だと思います。
どちらも、少しアレンジすれば色々なバリエーションのアコーディオンメニューが作れますので、いろんなパターンをJavaScriptとjQueryそれぞれで作ってみるのも良いですね！
JavaScriptでアコーディオンメニューを作りたい！ という方は、ぜひ参考にしてみてください。
ということで、
ツブツブのアラフォーシンママ あき がお伝えしました。
