HOME > JavaScript > JavaScriptで動くアコーディオンの作り方【コピペで1分】

JavaScriptで動くアコーディオンの作り方【コピペで1分】

目次: JavaScriptで動くアコーディオンのDEMO; JavaScriptで動くアコーディオンの作り方解説; HTML記述; css記述; javascript記述

JavaScriptで動くアコーディオンのDEMO

DEMOページ

JavaScriptで動くアコーディオンの作り方解説

JavaScriptを使用してアコーディオンの見出しとコンテンツが連動して動くように実装。

1．扱いやすくするためにHTMLは親要素と見出し、子要素のリスト（dl・dt・dd）要素で構成する
2．コンテンツ要素にdisplay:none;をかけて非表示にしておく
3．cssの擬似要素で開閉の「+」「-」を設定。cursor:pointerを見出しに設定してクリックが分かるように指定
4．JavaScriptを使用して見出しをクリックされたら、紐づいたコンテンツがdiplay:blockになるように設定
5．正しく動作していれば完成です。

HTML記述

HTMLをbody内の表示位置に記載します。

<dl class="accordion">
    <dt class="accordion-title">Q1.見出し1</dt>
    <dd class="accordion-content">A.コンテンツ1</dd>
    <dt class="accordion-title">Q2.見出し2</dt>
    <dd class="accordion-content">A.コンテンツ2</dd>
    <!-- dt/ddをコピーしたらアコーディオンを追加できます -->
</dl>

css記述

cssを<style>~</style>または自作cssの中に記述します。

<style>
/* リストのスタイルをリセット */
dl,dt,dd{
    margin: 0;
    list-style: none;
}

/* アコーディオン共通指定 */
.accordion-title,
.accordion-content{
    padding: 18px 20px 18px 20px;
    border-bottom: 1px solid #fff;
}

/* アコーディオン見出し */
.accordion-title{
    color: #fff;
    background-color: rgb(80,113,191);
    cursor: pointer;
    position: relative;
}
.accordion-title::before {
    content: '+ ';
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}
.accordion-title.open::before {
    content: '- ';
}
/* アコーディオンコンテンツ */
.accordion-content{
    display: none;
    background-color: rgb(218,226,240);   
}
</style>

Javascript記述

javascriptを<script>~</script>または自作jsの中に記述します。

<script>
// ドキュメントの読み込みが完了した時に実行する関数
document.addEventListener("DOMContentLoaded", () => {
  // アコーディオンタイトルをクリックした際の動作
  const titles = document.querySelectorAll('.accordion-title');
  titles.forEach((title) => {
    title.addEventListener("click", () => {
      // クリックされたアコーディオンタイトルのコンテンツを取得
      const content = title.nextElementSibling;

      // アコーディオンの開閉を切り替える
      const isHidden = window.getComputedStyle(content).display === "none";
      if (isHidden) {
        content.style.display = "block";
        title.classList.add("open"); // openを追加
      } else {
        content.style.display = "none";
        title.classList.remove("open"); // openを削除
      }
    });
  });
});
</script>