開閉時にアイコンが回転するアコーディオンの作り方

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>開閉アイコンが回転するアコーディオン</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

  <!-- JavaScriptファイル -->
  <script src="script.js" defer></script>

</head>
<body>

  <!-- アコーディオン全体 -->
  <div class="accordion-icon-rotation_wrap">

    <!-- 1つ目の項目 -->
    <div class="accordion-icon-rotation_item">

      <!-- 開閉ボタン -->
      <button class="accordion-icon-rotation_button" type="button" aria-expanded="false">

        <!-- 見出し -->
        <span class="accordion-icon-rotation_label">見出し1</span>

        <!-- 回転するSVGアイコン -->
        <span class="accordion-icon-rotation_icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m5 9 7 7 7-7"/>
          </svg>
        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="accordion-icon-rotation_content">
        <div class="accordion-icon-rotation_content-inner">1つ目の内容が表示されます。</div>
      </div>

    </div>

    <!-- 2つ目の項目 -->
    <div class="accordion-icon-rotation_item">

      <!-- 開閉ボタン -->
      <button class="accordion-icon-rotation_button" type="button" aria-expanded="false">

        <!-- 見出し -->
        <span class="accordion-icon-rotation_label">見出し2</span>

        <!-- 回転するSVGアイコン -->
        <span class="accordion-icon-rotation_icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m5 9 7 7 7-7"/>
          </svg>
        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="accordion-icon-rotation_content">
        <div class="accordion-icon-rotation_content-inner">2つ目の内容が表示されます。</div>
      </div>

    </div>

    <!-- 3つ目の項目 -->
    <div class="accordion-icon-rotation_item">

      <!-- 開閉ボタン -->
      <button class="accordion-icon-rotation_button" type="button" aria-expanded="false">

        <!-- 見出し -->
        <span class="accordion-icon-rotation_label">見出し3</span>

        <!-- 回転するSVGアイコン -->
        <span class="accordion-icon-rotation_icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m5 9 7 7 7-7"/>
          </svg>
        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="accordion-icon-rotation_content">
        <div class="accordion-icon-rotation_content-inner">3つ目の内容が表示されます。</div>
      </div>

    </div>

  </div>

</body>
</html>

/* =========================================
  アコーディオン全体
========================================= */

.accordion-icon-rotation_wrap {
  width: 100%; /* 親要素の横幅に合わせる */
  max-width: 700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin: 0 auto; /* 左右中央に配置 */
  font-family: sans-serif; /* 使用するフォント */
}

/* =========================================
  各項目
========================================= */

.accordion-icon-rotation_item {
  margin: 0 0 12px; /* 項目の下側余白。値を大きくすると項目間が広がる */
  border: 1px solid #000000; /* 項目を囲む枠線。太さや色を変更できる */
  border-radius: 12px; /* 角丸。値を大きくすると丸みが強くなる */
  overflow: hidden; /* 角丸から内容がはみ出さないようにする */
  background: #ffffff; /* 項目の背景色 */
}

/* 最後の項目 */
.accordion-icon-rotation_item:last-child {
  margin-bottom: 0; /* 最後の項目の下余白を削除 */
}

/* =========================================
  開閉ボタン
========================================= */

.accordion-icon-rotation_button {
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
  display: flex; /* 見出しとアイコンを横並びにする */
  align-items: center; /* 上下中央に揃える */
  justify-content: space-between; /* 見出しとアイコンを左右に配置 */
  gap: 16px; /* 見出しとアイコンの間隔 */
  width: 100%; /* 項目の横幅いっぱいに表示 */
  padding: 16px 18px 16px; /* 上下16px・左右18pxの余白 */
  border: none; /* ボタン標準の枠線を削除 */
  border-radius: 0; /* ボタン自体の角丸を削除 */
  background: #ffffff; /* ボタンの背景色 */
  color: #111827; /* 見出しの文字色 */
  font-family: inherit; /* 親要素のフォントを使用 */
  font-size: 16px; /* 見出しの文字サイズ */
  font-weight: 700; /* 見出しを太字にする */
  line-height: 1.5; /* 見出しの行間 */
  text-align: left; /* 見出しを左揃えにする */
  cursor: pointer; /* マウスを重ねたときにポインターを表示 */
}

/* 見出し */
.accordion-icon-rotation_label {
  flex: 1 1 auto; /* アイコン以外の横幅を使用 */
  min-width: 0; /* 長い文字列でも縮小できるようにする */
  overflow-wrap: anywhere; /* 長い文字列を折り返す */
  white-space: pre-wrap; /* 改行を保持する */
}

/* =========================================
  回転するSVGアイコン
========================================= */

.accordion-icon-rotation_icon {
  display: flex; /* SVGアイコンを中央に配置 */
  flex: 0 0 auto; /* アイコンの大きさを維持 */
  align-items: center; /* 上下中央に配置 */
  justify-content: center; /* 左右中央に配置 */
  width: 22px; /* アイコンの横幅。値を大きくすると横に広がる */
  height: 22px; /* アイコンの高さ。値を大きくすると縦に広がる */
  color: #2563eb; /* SVGアイコンの色 */
  translate: 0px 0px; /* アイコンの位置調整 */
  transform: rotate(0deg); /* 閉じた状態では回転させない */
  transform-origin: center center; /* アイコンの中心を回転軸にする */
  transition: transform 400ms ease; /* 400msで滑らかに回転。値を大きくすると遅くなる */
}

/* SVGアイコン */
.accordion-icon-rotation_icon svg {
  display: block; /* SVGの余分な隙間を防止 */
  width: 100%; /* アイコン領域の横幅に合わせる */
  height: 100%; /* アイコン領域の高さに合わせる */
}

/* =========================================
  開いたときのアイコンの回転
========================================= */

.accordion-icon-rotation_item.is-open .accordion-icon-rotation_icon {
  transform: rotate(90deg); /* 右回り90度。値を変更すると回転方向と角度が変わる */
}

/*
  回転方向と角度の変更例

  右回り90度
  transform: rotate(90deg);

  左回り90度
  transform: rotate(-90deg);

  右回り180度
  transform: rotate(180deg);

  左回り180度
  transform: rotate(-180deg);
*/

/* =========================================
  開閉する内容
========================================= */

.accordion-icon-rotation_content {
  display: none; /* 初期状態では内容を非表示 */
  background: #ffffff; /* 内容の背景色 */
  color: #4b5563; /* 内容の文字色 */
  font-size: 16px; /* 内容の文字サイズ */
  font-weight: 400; /* 内容の文字の太さ */
  line-height: 1.8; /* 内容の行間 */
}

/* 内容の内側 */
.accordion-icon-rotation_content-inner {
  min-height: 0; /* 内容の最小高さ */
  overflow: hidden; /* 内容のはみ出しを防止 */
  padding: 0 18px; /* 内容の左右18pxの余白 */
  text-align: left; /* 内容を左揃えにする */
  overflow-wrap: anywhere; /* 長い文字列を折り返す */
  white-space: pre-wrap; /* 改行を保持する */
}

/* 内容の下側余白 */
.accordion-icon-rotation_content-inner::after {
  display: block; /* 下側余白を確保する */
  height: 18px; /* 内容の下側余白。値を大きくすると余白が広がる */
  content: ""; /* 装飾用の空要素 */
}

/* 開いている項目の内容を表示 */
.accordion-icon-rotation_item.is-open .accordion-icon-rotation_content {
  display: block; /* 内容を表示する */
}

/* =========================================
  動きを減らす設定
========================================= */

@media (prefers-reduced-motion: reduce) {

  .accordion-icon-rotation_icon {
    transition: none; /* 動きを減らす設定では回転アニメーションを無効化 */
  }

}

/* =========================================
  レスポンシブ
========================================= */

@media (max-width: 640px) {

  /* アコーディオン全体 */
  .accordion-icon-rotation_wrap {
    width: 100%; /* 親要素の横幅に合わせる */
    max-width: 100%; /* 最大横幅を親要素に合わせる */
    margin: 0 auto; /* 左右中央に配置 */
  }

  /* 開閉ボタン */
  .accordion-icon-rotation_button {
    gap: 12px; /* 見出しとアイコンの間隔を小さくする */
  }

  /* 見出し */
  .accordion-icon-rotation_label {
    min-width: 0; /* 長い文字列でも縮小できるようにする */
    overflow-wrap: anywhere; /* 長い文字列を折り返す */
  }

  /* アイコン */
  .accordion-icon-rotation_icon {
    flex-shrink: 0; /* アイコンの縮小を防止 */
  }

}

/* =========================================
  アコーディオンの開閉処理
========================================= */

/* すべてのアコーディオンボタンを取得 */
const accordionButtons = document.querySelectorAll(
  ".accordion-icon-rotation_button"
);

/* 各ボタンにクリック処理を設定 */
accordionButtons.forEach(function (button) {

  button.addEventListener("click", function () {

    /* クリックしたボタンの親項目を取得 */
    const item = button.parentElement;

    /* クリックした項目だけを開閉する */
    item.classList.toggle("is-open");

    /* 開閉状態をアクセシビリティ属性へ反映 */
    button.setAttribute(
      "aria-expanded",
      item.classList.contains("is-open") ? "true" : "false"
    );

  });

});