아코디언

div.accordion
├─ h3                         ← 제목 (제목 탐색으로 이동 가능)
│  └─ button  aria-expanded="true"  aria-controls="panel-1"  id="btn-1"
├─ div#panel-1  role="region"  aria-labelledby="btn-1"      ← 펼쳐진 패널
├─ h3
│  └─ button  aria-expanded="false" aria-controls="panel-2"  id="btn-2"
└─ div#panel-2  role="region"  aria-labelledby="btn-2"  hidden

<div class="accordion">
  <h3>
    <button type="button" class="ac-trigger" id="ac-btn-1"
            aria-expanded="false" aria-controls="ac-panel-1">
      <span class="ac-icon" aria-hidden="true"></span>배송은 얼마나 걸리나요?
    </button>
  </h3>
  <div id="ac-panel-1" role="region" aria-labelledby="ac-btn-1" hidden>
    <p>평일 오후 2시 이전 주문은 당일 출고하며, 보통 1~2일 안에 도착합니다.</p>
  </div>

  <h3>
    <button type="button" class="ac-trigger" id="ac-btn-2"
            aria-expanded="false" aria-controls="ac-panel-2">
      <span class="ac-icon" aria-hidden="true"></span>교환·반품은 어떻게 하나요?
    </button>
  </h3>
  <div id="ac-panel-2" role="region" aria-labelledby="ac-btn-2" hidden>
    <p>상품을 받은 날부터 7일 안에 마이페이지에서 신청할 수 있습니다.</p>
  </div>
</div>

<script>
  initAccordion(document.querySelector('.accordion'), { single: false });
</script>

// 아코디언: 제목(h3) 안의 버튼 + 패널 묶음
// options.single = true 이면 하나를 펼칠 때 나머지를 접습니다.
function initAccordion(root, options) {
  options = options || {};
  var triggers = Array.prototype.slice.call(root.querySelectorAll('.ac-trigger'));

  function panelOf(btn) { return document.getElementById(btn.getAttribute('aria-controls')); }
  function setOpen(btn, open) {
    btn.setAttribute('aria-expanded', String(open));
    panelOf(btn).hidden = !open;
  }

  triggers.forEach(function (btn) {
    btn.addEventListener('click', function () {
      var open = btn.getAttribute('aria-expanded') !== 'true';
      if (open && options.single) {
        triggers.forEach(function (other) { if (other !== btn) setOpen(other, false); });
      }
      setOpen(btn, open);
    });

    // (선택) 제목 사이 화살표 이동
    btn.addEventListener('keydown', function (e) {
      var i = triggers.indexOf(btn), next = null;
      if (e.key === 'ArrowDown') next = triggers[(i + 1) % triggers.length];
      else if (e.key === 'ArrowUp') next = triggers[(i - 1 + triggers.length) % triggers.length];
      else if (e.key === 'Home') next = triggers[0];
      else if (e.key === 'End') next = triggers[triggers.length - 1];
      if (next) { e.preventDefault(); next.focus(); }
    });
  });
}

<!-- 같은 name을 가진 details는 하나만 열립니다 (배타적 아코디언) -->
<details name="faq">
  <summary>배송은 얼마나 걸리나요?</summary>
  <p>평일 오후 2시 이전 주문은 당일 출고합니다.</p>
</details>
<details name="faq">
  <summary>교환·반품은 어떻게 하나요?</summary>
  <p>상품을 받은 날부터 7일 안에 신청할 수 있습니다.</p>
</details>