セレクトボックスとチェック内容で追加要素を変更する

Posted at 2025-11-26

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>詳細切替UI</title>

<style>
  body {
    font-family: sans-serif;
    padding: 20px;
  }

  .wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }

  /* === ▼ ここがポイント ▼ === */
  .detail-panels {
    position: relative;
    height: 160px; /* 一番大きいパネルに合わせる */
  }

  .detail-panel {
    position: absolute;
    inset: 0; /* top, right, bottom, left全部0 */
    opacity: 0;
    pointer-events: none;
    transition: .3s ease;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 6px;
    background: #fff;
  }

  .detail-panel.is-active {
    opacity: 1;
    pointer-events: auto;
  }
</style>
</head>

<body>

<h2>詳細表示サンプル</h2>

<div class="wrap">
  <select id="typeSelect">
    <option value="">選択してください</option>
    <option value="test1">テスト1</option>
    <option value="test2">テスト2</option>
    <option value="test3">テスト3</option>
  </select>

  <label style="cursor: pointer;">
    <input type="checkbox" id="toggleDetail">
    詳細を見る
  </label>
</div>


<div class="detail-panels">

  <div class="detail-panel" data-type="test1">
    <p><strong>テスト1の設定</strong></p>
    <input type="text" placeholder="テスト1用テキスト">
    <br><br>
    <label><input type="checkbox"> オプションA</label>
  </div>

  <div class="detail-panel" data-type="test2">
    <p><strong>テスト2の設定</strong></p>
    <select>
      <option>テスト2のセレクト1</option>
      <option>テスト2のセレクト2</option>
    </select>
    <br><br>
    <input type="number" placeholder="数値入力">
  </div>

  <div class="detail-panel" data-type="test3">
    <p><strong>テスト3の設定</strong></p>
    <textarea placeholder="自由入力欄" rows="3"></textarea>
  </div>

</div>


<script>
  const select = document.getElementById('typeSelect');
  const checkbox = document.getElementById('toggleDetail');
  const panels = document.querySelectorAll('.detail-panel');

  function updateDetailPanel() {
    const value = select.value;

    panels.forEach(panel => {
      if (checkbox.checked && panel.dataset.type === value) {
        panel.classList.add('is-active');
      } else {
        panel.classList.remove('is-active');
      }
    });
  }

  select.addEventListener('change', updateDetailPanel);
  checkbox.addEventListener('change', updateDetailPanel);
</script>

</body>
</html>
You get articles that match your needs
You can efficiently read back useful information
You can use dark theme
What you can do with signing up