【JavaScript】アコーディオンメニューの実装方法

今回の記事では、JavaScriptでアコーディオンメニューを作成する方法を解説します。
アコーディオンは、WEB制作の場面でよく使用される技術になります。
特に、スマートフォンなどの表示領域が限られたデバイスでは、効果的に使用することができます。

※実装では、jQueryなどのライブラリは使用せず、素のJavaScriptで実装をしています。

■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】

実装と解説

アコーディオンメニューは、FAQや用語解説などの、相互の内容がセットになっている際に使用されるケースが多いです。
まずは完成イメージからご確認ください。
※結論だけ知りたいという方は、CodePen内のソースコードをご利用ください。

See the Pen アコーディオンメニュー by waibandl321 (@JumCode) on CodePen.

アコーディオンメニューの実装は、下記の記事で紹介したハンバーガーメニューの実装と同じように
イベントの発火と同時に、DOMを変更するためのclassを対象要素に付与することで実装します。

【JavaScript】ハンバーガーメニューの作り方

HTML

<div class="container">
    <dl class="accordion">
        <dt>質問1質問1質問1</dt>
        <dd>回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト</dd>
        <dt>質問2質問2質問2</dt>
        <dd>回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト</dd>
        <dt>質問3質問3質問3</dt>
        <dd>回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト</dd>
        <dt>質問4質問4質問4</dt>
        <dd>回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト</dd>
    </dl>
</div>

まず、アコーディオンに使用するHTMLのタグは、dlタグを採用しました。
今回は、FAQを実装する想定で行っていますので、dtタグに質問、ddタグに回答が来るようにします。

CSS

.accordion dt::after {
    position: absolute;
    content: "\03e";
    right: 15px;
    transition: 0.2s;
}
.accordion dt.open::after {
    transform: rotate(90deg);
}
.accordion dd {
    opacity: 0;
    height: 0;
    padding: 0 15px;
    transition: 0.2s;
}
.accordion dd.open {
    opacity: 1;
    height: auto;
    padding: 15px;
}

CSSでは、classが付与された際のスタイルを定義しています。

開閉要素のddタグについては、デフォルトの状態では高さを0で非表示にし、
クリックされたタイミングで、通常の要素の高さを戻す処理を行っています。

また、dtタグの矢印についても、
閉じている時は右向きで、開いた時は下向きになるように実装しています。
アコーディオンの挙動を視覚的に伝えることで、ユーザーも理解しやすくなります。

さらにtransitionプロパティを指定することで、アコーディオンの開閉をアニメーション的に見せています。

JavaScript

const dt_tags = document.querySelectorAll('.accordion dt');
dt_tags.forEach(dt => {
    dt.addEventListener('click', () => {
        dt.classList.toggle('open');
        dt.nextElementSibling.classList.toggle('open');
    })
});

各dtタグを個別に取得し、クリックイベントの発火と同時にDOM操作を行っています。
今回はアコーディオンの開閉の挙動になるので、イベントが発生した次の要素にclassList.toggleを使用しています。
class属性の操作については、下記の記事を参照ください。

JSでclass属性(DOM)を操作する方法

アコーディオンの実装についての解説は以上になります。

■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】

合わせて読みたい

似たような実装方法になりますので、興味のある方は閲覧してみてください。

【JavaScript】ハンバーガーメニューの作り方