アコーディオンメニューはJavaScriptで作れる!【初心者もOK】

こんにちは。

息子がほっぺにチューしてくれたとき、「お母さんのお鼻に‘ツブツブ’がついてるよ」と真顔で言われショックを受けている、アラフォーシンママの あき です。

 

今回は、アコーディオンメニューのおはなし。

 

メニューボタンを押したら、隠れていたボタンが表示されるようなメニューの表示の事を、アコーディオンメニューと言いますね。

 

アコーディオンメニューの作り方はいろいろありますが、簡単に書けるjQueryで作るという方が多いのではないかと思います。

でも実は、素のJavaScriptでも意外と簡単に書くことができるんです。

 

今回は、JavaScriptを使ったアコーディオンメニューの作り方をご紹介します!

 

JavaScriptを使ったアコーディオンメニューの動作デモ

 

See the Pen
Javascript_accordion
by akiyo (@akiyohayakawa)
on CodePen.

こんな感じですね。

 

実際のコード

  では実際に記述するコードを見ていきましょう。

 HTML

 CSS

JavaScript

JavaScriptのコード量、意外と少ないですね!

< 解説 >

では、JavaScriptのコードを解説していきます。

このコードでは、

・ クリックする要素  <p class="menu js-menu">メニュー1</p>
・ 展開される要素   <div class="contents">コンテンツ1</div>

となっています。

まずは、document.querySelectorAll を使って、クリックする要素であるjs-menuというクラスを取得します。(クリックする要素は3つあり、それらすべてを取得したいので querySelectorAll を使います。)

 

 

次に、toggle関数を定義します。

 

toggle関数の中の処理としては、まず .nextElementSibling で this の隣の要素を取得します。(thisは .js-menu を指します)

 

↓隣の要素なので、これですね。この contents というクラスを content に代入します。

 

そして、

・ this すなわち .js-menu には .classList.toggle で ”is-active” を指定
・ content すなわち contents には .classList.toggle で ”is-open” を指定

します。

 

こうすることで、

 ・ そのクラスが含まれていればクラスを削除、含まれていなければクラスを追加する

という動作が行われます。クラスを付けたり外したりしてくれるのが toggle ですね。

 

最後に、for文を使ってそれぞれの要素にクリックイベントをつくります。

先にtoggle関数を定義しておき、後のfor文中のaddEventListener で呼び出すというかたちですね。

 

1つ1つ説明していくと少しややこしいですが、素のJavaScriptで書いても、書くコードの量は意外と少なく済むと感じた方も多いのではないでしょうか。

 

jQueryを使ったアコーディオンメニュー

JavaScriptでの書き方の一例を見たところで、jQueryで書く場合と比べてどれくらいの違いがあるのかを見てみましょう。

実際のコード

HTML

JavaScriptの時と全く同じです。

CSS

こちらもほぼ同じですが、 contentsクラスの部分だけ変えてあります。

jQuery

そしてjQuery。
めちゃくちゃシンプルになりました!

 

< 解説 >

まずは、 .on(“click” で、クリックイベントの処理をつくります。

 

その後の $(this) は、 .js-menu のことを指しています。
そして、 .next() はその隣の要素を指します。

 

つまり、この↓ contents というクラスの要素ですね。

slideToggle()は、これを書くだけで slideUp() とslideDown() の動作を交互に行ってくれます。

 

 

まとめ

以上、JavaScriptでアコーディオンメニューを作る方法をご紹介しました。

jQueryで書く場合と比較もしてみましたが、意外と簡単に素のJavaScriptで書くことができますね!

 

とはいっても、比較してみるとやはり簡単なのはjQuery

しかし、簡単にjQueryで書くのも良いですが、JavaScriptで書いてみて動きの基本を押さえておくことも大事だと思います。
どちらも、少しアレンジすれば色々なバリエーションのアコーディオンメニューが作れますので、いろんなパターンをJavaScriptとjQueryそれぞれで作ってみるのも良いですね!

 

JavaScriptでアコーディオンメニューを作りたい! という方は、ぜひ参考にしてみてください。

 

ということで、
ツブツブのアラフォーシンママ あき がお伝えしました。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?