アコーディオンにiframeでYouTube・PDF・Googleマップを表示する方法

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iframeアコーディオン</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- iframeアコーディオン本体 -->
  <div class="iframe-accordion_wrap">

    <!-- PDF -->
    <div class="iframe-accordion_item">
      <button
        type="button"
        class="iframe-accordion_button"
        aria-expanded="false"
        aria-controls="iframe-accordion-pdf"
      >
        PDFを表示
        <span class="iframe-accordion_icon" aria-hidden="true"></span>
      </button>

      <div
        id="iframe-accordion-pdf"
        class="iframe-accordion_content"
        hidden
      >
        <!-- PDFのURLをsrcに指定 -->
        <iframe
          class="iframe-accordion_frame"
          src="https://maruhinoto.com/wp-content/uploads/2026/06/sample-blue.pdf"
          title="PDFサンプル"
          loading="lazy"
        ></iframe>
      </div>
    </div>

    <!-- Googleマップ -->
    <div class="iframe-accordion_item">
      <button
        type="button"
        class="iframe-accordion_button"
        aria-expanded="false"
        aria-controls="iframe-accordion-map"
      >
        Googleマップを表示
        <span class="iframe-accordion_icon" aria-hidden="true"></span>
      </button>

      <div
        id="iframe-accordion-map"
        class="iframe-accordion_content"
        hidden
      >
        <!-- Googleマップの埋め込みURLをsrcに指定 -->
        <iframe
          class="iframe-accordion_frame"
          src="https://www.google.com/maps?q=東京駅&output=embed"
          title="東京駅のGoogleマップ"
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"
        ></iframe>
      </div>
    </div>

    <!-- YouTube -->
    <div class="iframe-accordion_item">
      <button
        type="button"
        class="iframe-accordion_button"
        aria-expanded="false"
        aria-controls="iframe-accordion-youtube"
      >
        YouTube動画を表示
        <span class="iframe-accordion_icon" aria-hidden="true"></span>
      </button>

      <div
        id="iframe-accordion-youtube"
        class="iframe-accordion_content"
        hidden
      >
        <div class="iframe-accordion_video">
          <!-- YouTubeの埋め込みURLをsrcに指定 -->
          <iframe
            class="iframe-accordion_frame"
            src="https://www.youtube.com/embed/aqz-KE-bpKQ"
            title="YouTubeサンプル動画"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>

  </div>

  <script src="script.js"></script>

</body>
</html>

/* =========================================
   iframeアコーディオン
========================================= */

/* アコーディオン全体 */
.iframe-accordion_wrap {
  width: 100%;
  max-width: 760px; /* 最大横幅 */
  margin: 0 auto;
  border: 1px solid #dbe3ee; /* 外枠の太さ・色 */
  border-radius: 12px; /* 外枠の角丸 */
  background: #ffffff;
  overflow: hidden;
}

/* 各項目 */
.iframe-accordion_item {
  border-bottom: 1px solid #dbe3ee; /* 項目の区切り線 */
}

/* 最後の項目 */
.iframe-accordion_item:last-child {
  border-bottom: none;
}

/* 開閉ボタン */
.iframe-accordion_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px; /* ボタンの最小高さ */
  padding: 16px 20px; /* 上下・左右の余白 */
  border: none;
  background: #ffffff;
  color: #111827;
  font-size: 16px; /* 文字サイズ */
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease; /* 背景色の変化時間 */
}

/* マウスを重ねたとき */
.iframe-accordion_button:hover {
  background: #f1f5f9;
}

/* 開閉アイコン */
.iframe-accordion_icon {
  position: relative;
  flex-shrink: 0;
  width: 20px; /* アイコン領域の横幅 */
  height: 20px; /* アイコン領域の高さ */
  margin-left: 16px; /* 文字との間隔 */
}

/* プラス・マイナスの線 */
.iframe-accordion_icon::before,
.iframe-accordion_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #2563eb;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease; /* アイコンの回転時間 */
}

/* 横線 */
.iframe-accordion_icon::before {
  width: 14px; /* 横線の長さ */
  height: 2px; /* 横線の太さ */
}

/* 縦線 */
.iframe-accordion_icon::after {
  width: 2px; /* 縦線の太さ */
  height: 14px; /* 縦線の長さ */
}

/* 開いたときは縦線を回転させる */
.iframe-accordion_button[aria-expanded="true"] .iframe-accordion_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* コンテンツ */
.iframe-accordion_content {
  padding: 20px; /* コンテンツの内側余白 */
  background: #f8fafc;
}

/* 閉じているコンテンツ */
.iframe-accordion_content[hidden] {
  display: none;
}

/* iframe共通 */
.iframe-accordion_frame {
  display: block;
  width: 100%;
  height: 380px; /* PDF・Googleマップの表示高さ */
  border: 1px solid #dbe3ee;
  border-radius: 8px; /* iframeの角丸 */
  background: #ffffff;
}

/* YouTube動画の表示領域 */
.iframe-accordion_video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 動画の縦横比 */
}

/* YouTube動画のiframe */
.iframe-accordion_video .iframe-accordion_frame {
  width: 100%;
  height: 100%;
}

/* =========================================
   スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 開閉ボタン */
  .iframe-accordion_button {
    min-height: 56px; /* スマートフォンでの最小高さ */
    padding: 14px 16px; /* 上下・左右の余白 */
    font-size: 15px; /* 文字サイズ */
  }

  /* コンテンツ */
  .iframe-accordion_content {
    padding: 12px; /* 内側余白 */
  }

  /* iframe */
  .iframe-accordion_frame {
    height: 300px; /* PDF・Googleマップの表示高さ */
  }

  /* YouTube動画 */
  .iframe-accordion_video .iframe-accordion_frame {
    height: 100%;
  }

}

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

(() => {
  // アコーディオン全体を取得
  const accordion = document.querySelector(".iframe-accordion_wrap");

  if (!accordion) return;

  // 各開閉ボタンにイベントを設定
  accordion.querySelectorAll(".iframe-accordion_button").forEach((button) => {
    button.addEventListener("click", () => {
      // 対応するコンテンツを取得
      const contentId = button.getAttribute("aria-controls");
      const content = document.getElementById(contentId);

      if (!content) return;

      // 現在の開閉状態を取得
      const isOpen = button.getAttribute("aria-expanded") === "true";

      // 開閉状態を切り替え
      button.setAttribute("aria-expanded", String(!isOpen));
      content.hidden = isOpen;
    });
  });
})();