<details> และ <summary> — accordion โดยไม่ต้องเขียน JavaScript

<details>
  <summary>คำถามที่พบบ่อย</summary>
  <p>เนื้อหาที่ซ่อนอยู่ — คลิก summary เพื่อเปิด/ปิด</p>
</details>

<details> collapse โดย default — เพิ่ม open attribute เพื่อให้เปิดตั้งแต่ต้น:

<details open>
  <summary>เปิดอยู่ตั้งแต่ต้น</summary>
  <p>เนื้อหานี้มองเห็นได้เลย</p>
</details>

Style ด้วย CSS:

details { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; }
summary { cursor: pointer; font-weight: 600; list-style: none; }
summary::after { content: ' ▸'; transition: transform 0.2s; }
details[open] summary::after { content: ' ▾'; }

/* Animate เนื้อหา */
details > *:not(summary) { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

browser จัดการ keyboard (Space/Enter toggle), aria-expanded และ screen reader ให้ทั้งหมดโดยอัตโนมัติ — ไม่ต้องเพิ่ม ARIA เอง