コピペで完結！アコーディオン#01【シンプル・軽量】

/* ルート：カスタムプロパティ（色や角丸を一括管理） */
#my-accordion{
  --radius:12px;         /* 角丸半径（ボックスやボタンに共通） */
  --border:#e5e7eb;      /* 枠線色（淡いグレー） */
  --ink:#0f172a;         /* 文字色（濃いインク色） */
  --muted:#64748b;       /* 補助テキスト色（やや淡い） */
  --accent:#0b6bff;      /* アクセント色（必要なら利用） */
  --bg:#fff;             /* 背景色（白） */
}

/* 各アイテム枠：外側の箱（見出し＋本文を内包） */
#my-accordion .acc-item{
  border:1px solid var(--border);   /* 薄い枠線で区切り */
  border-radius:var(--radius);      /* カード風に角丸 */
  background:var(--bg);             /* 背景は白 */
  margin:12px 0;                    /* 項目間の余白 */
  overflow:hidden;                   /* 角丸に本文の角も揃える（はみ出し抑止） */
}

/* 見出しボタン：クリック/Enter/Spaceで開閉（button要素推奨） */
#my-accordion .acc-btn{
  -webkit-appearance:none;          /* ブラウザ既定のボタン外観を無効化（iOS含む） */
  appearance:none;
  width:100%;                       /* 横いっぱいでクリックしやすく */
  text-align:left;                  /* 見出しテキストは左寄せ */
  display:flex;                     /* タイトルとアイコンを左右配置するためflex */
  align-items:center;               /* 縦位置中央 */
  justify-content:space-between;    /* 左＝タイトル、右＝アイコン */
  gap:12px;                         /* タイトルとアイコンの間隔 */
  padding:14px 16px;                /* タップしやすい余白 */
  background:#fff;                  /* 背景は白 */
  border:none;                      /* 枠線は不要 */
  cursor:pointer;                   /* ホバー時にポインタ */
  color:var(--ink);                 /* 文字色 */
  font:inherit;                     /* 親のフォント/サイズを継承（テーマと整合） */
  line-height:1.4;                  /* 読みやすい行間 */
}

/* 見出し内のタイトル文字：やや強調 */
#my-accordion .acc-title{ 
  font-weight:600;                  /* セミボールドで視認性UP */
}

/* 見出し内のアイコン：＋／－など（JSで切替する想定） */
#my-accordion .acc-icon{ 
  font-weight:700;                  /* しっかり目の太さ */
}

/* ホバー時の軽い反応（背景をほんのり） */
#my-accordion .acc-btn:hover{ 
  background:#f8fafc;               /* ごく薄いグレーで反応を見せる */
}

/* キーボード操作時の可視フォーカス（アクセシビリティ） */
#my-accordion .acc-btn:focus-visible{ 
  outline:2px solid #93c5fd;        /* 青系のアウトライン */
  outline-offset:2px;               /* 枠を少し外側にずらす */
}

/* 本文パネル：開いたときに表示される内容の容器 */
#my-accordion .acc-panel{
  padding:12px 16px;                /* テキストの左右余白 */
  border-top:1px solid var(--border);/* 見出しとの境界線 */
  color:var(--ink);                 /* 本文色 */
}

/* アニメ用の一時クラス：
   JS側で height を0⇄scrollHeightに変化させる時だけ付与
   → CSS側は transition を付けるだけにし、スムーズな開閉を実現 */
#my-accordion .acc-panel.is-animating{
  overflow:hidden;                  /* アニメ中のはみ出し防止 */
  transition:height .24s ease;      /* 高さの補間（0.24秒） */
}

<div class="cp-accordion" id="my-accordion">

  <div class="acc-item">
    <button class="acc-btn" aria-expanded="false" aria-controls="my-panel-1" id="my-btn-1">
      <span class="acc-title">見出し 1</span>
      <span class="acc-icon" aria-hidden="true">＋</span>
    </button>
    <div class="acc-panel" id="my-panel-1" role="region" aria-labelledby="my-btn-1" hidden>
      <p>本文 1。ここに自由に内容を入れてください。</p>
    </div>
  </div>

  <div class="acc-item">
    <button class="acc-btn" aria-expanded="false" aria-controls="my-panel-2" id="my-btn-2">
      <span class="acc-title">見出し 2</span>
      <span class="acc-icon" aria-hidden="true">＋</span>
    </button>
    <div class="acc-panel" id="my-panel-2" role="region" aria-labelledby="my-btn-2" hidden>
      <p>本文 2。ここに自由に内容を入れてください。</p>
    </div>
  </div>

  <div class="acc-item">
    <button class="acc-btn" aria-expanded="false" aria-controls="my-panel-3" id="my-btn-3">
      <span class="acc-title">見出し 3</span>
      <span class="acc-icon" aria-hidden="true">＋</span>
    </button>
    <div class="acc-panel" id="my-panel-3" role="region" aria-labelledby="my-btn-3" hidden>
      <p>本文 3。ここに自由に内容を入れてください。</p>
    </div>
  </div>

</div>

(function(){
  // ルート要素を取得
  const root = document.getElementById('my-accordion');
  if(!root) return; // 見つからなければ処理しない

  // true = 1つだけ開く（falseなら複数同時に開ける）
  const single = true;

  // 各要素を配列にまとめる
  const items  = Array.from(root.querySelectorAll('.acc-item'));
  const btns   = items.map(it => it.querySelector('.acc-btn'));
  const panels = items.map(it => it.querySelector('.acc-panel'));

  // 初期化：すべて閉じる（hiddenとaria-expandedを同期）
  panels.forEach((p,i)=>{
    p.hidden = true;
    btns[i].setAttribute('aria-expanded','false');
  });

  // パネルの開閉処理（アニメーションあり）
  function setOpen(i, open){
    const btn = btns[i], panel = panels[i];
    if(!btn || !panel) return;

    // すでに目的の状態なら何もしない
    const already = btn.getAttribute('aria-expanded') === 'true';
    if(already === open) return;

    // アイコンを＋⇔−に切替
    const icon = btn.querySelector('.acc-icon');
    if(icon) icon.textContent = open ? '－' : '＋';

    // aria-expanded を更新
    btn.setAttribute('aria-expanded', String(open));

    // 高さアニメーション開始
    panel.classList.add('is-animating');
    panel.style.height = open ? '0px' : panel.scrollHeight + 'px'; // 出発点の高さ
    panel.hidden = false; // hiddenだと高さが測れないので一旦表示
    requestAnimationFrame(()=>{
      panel.style.height = (open ? panel.scrollHeight : 0) + 'px'; // 目標の高さへ
    });

    // アニメーション終了後の後処理
    const onEnd = (e)=>{
      if(e.propertyName !== 'height') return; // height以外の変化は無視
      panel.classList.remove('is-animating');
      panel.style.height = '';  // inlineスタイルをリセット
      panel.hidden = !open;     // 閉じる場合はhiddenを再度付与
      panel.removeEventListener('transitionend', onEnd);
    };
    panel.addEventListener('transitionend', onEnd);
  }

  // すべて閉じる（exceptIndex以外）
  function closeAll(exceptIndex){
    btns.forEach((_,j)=>{
      if(j!==exceptIndex) setOpen(j,false);
    });
  }

  // 各ボタンにイベント設定
  btns.forEach((btn,i)=>{
    // クリックで開閉
    btn.addEventListener('click', ()=>{
      const willOpen = btn.getAttribute('aria-expanded') !== 'true';
      if(single){ closeAll(i); } // 単一展開モードなら他を閉じる
      setOpen(i, willOpen);
    });

    // キーボード操作対応
    btn.addEventListener('keydown', (e)=>{
      if(e.key==='Enter' || e.key===' '){
        e.preventDefault();
        btn.click(); // Space/Enterでクリック相当
        return;
      }
      if(e.key==='ArrowDown'){ // ↓キー：次のボタンへ
        e.preventDefault(); btns[(i+1)%btns.length].focus();
      }
      if(e.key==='ArrowUp'){   // ↑キー：前のボタンへ
        e.preventDefault(); btns[(i-1+btns.length)%btns.length].focus();
      }
      if(e.key==='Home'){      // Homeキー：最初へ
        e.preventDefault(); btns[0].focus();
      }
      if(e.key==='End'){       // Endキー：最後へ
        e.preventDefault(); btns[btns.length-1].focus();
      }
    });
  });
})();