JavaScriptでアコーディオンメニューの作り方

アコーディオンメニューって、jQueryじゃなくても作れるのかなぁ？

素のJavaScriptでもたしか作れるよねっ

今回はこんな疑問にお答えします！

よくjQueryで作られるアコーディオンメニューですが、意外とJavaScriptでも簡単に作れましたので、ご紹介しようと思います。

というかjQueryの裏側は素のJavaScriptで作られているので作れないはずがないですよね。笑

では、サクッとやってみましょう！

記事でわかること

・JavaScriptでアコーディオンメニューを実装する方法

記事の信頼性

筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

CONTENTS［ hide ］

01｜ JavaScriptでアコーディオンメニューの作り方
・実装に必要なコード
・動作デモ
02｜最後に：JavaScriptでアコーディオンメニューの作り方

JavaScriptでアコーディオンメニューの作り方

実装に必要なコード

それでは、実装に必要な各種コードを先に書いていきます。
クラス名はお好みのものに変更していただいて問題ないです。

HTMLコード

<div class="contentsWrap">
    <button class="btnOpen">メニューを開く</button>
    <ul class="menu">
        <li>メニュー01</li>
        <li>メニュー02</li>
        <li>メニュー03</li>
        <li>メニュー04</li>
        <li>メニュー05</li>
    </ul>
</div>

CSSコード

.contentsWrap {
    width: 200px;
}
.contentsWrap .btnOpen {
    width: 100%;
    height: 45px;
    background: #b9e3f0;
    border: none;
    outline: none;
    cursor: pointer;
}
.contentsWrap .menu {
    overflow: hidden;
    transition: all 500ms;
}
.contentsWrap .menu li:first-child {
    border-top: 1px solid #a3c5d0;
}
.contentsWrap .menu li {
    padding: 10px 0;
    border-bottom: 1px solid #a3c5d0;
    background: #eef8fb;
    cursor: default;
    text-align: center;
}

JavaScriptコード

const btn = document.getElementsByClassName( 'btnOpen' ).item( 0 ),
      menu = document.querySelector( '.menu' ),
      menuH = menu.clientHeight;
		  
menu.style.height = '0px';
	
btn.addEventListener( 'click', function () {
    menu.style.height === '0px' ? menu.style.height = menuH + 'px' : menu.style.height = '0px';
}, false );