<details> และ <summary> สร้าง native disclosure widget — ส่วนที่ขยายได้/ยุบได้ — โดยไม่มี JavaScript บราวเซอร์จัดการการสลับ การรองรับแป้นพิมพ์ และการเข้าถึงสำหรับคุณ
html
Click to expand
This content is hidden until the user opens it.
<summary> คือป้ายกำกับที่คลิกได้ (ลูกแรก)<details open> <!-- starts expanded -->
<summary>FAQ item</summary>
<p>Answer...</p>
</details>
const d = document.querySelector("details");
d.open; // boolean: is it open?
d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close
summary { cursor: pointer; }
summary::marker { color: blue; } /* the triangle/arrow */
details[open] summary { font-weight: bold; } /* style when open */
Accordion ของ FAQ ส่วน "แสดงเพิ่มเติม" แถบข้างยุบได้ ข้อความ spoiler แถวตารางที่ขยายได้ ก่อนหน้านี้ accordion ทุกรายการต้องใช้ JavaScript และการเชื่อมต่อ ARIA เพื่อการเข้าถึง — ตอนนี้เป็นเพียงแท็กความหมายสองแท็ก
<details>/<summary> ให้เนื้อหาที่ยุบได้ที่เข้าถึงได้ เป็นมิตรกับแป้นพิมพ์ โดยไม่มี JS และไม่มี ARIA ด้วยตนเอง — ตัวอย่างที่สมบูรณ์แบบของการใช้แพลตฟอร์ม
ใช้สำหรับ FAQ และรูปแบบ "แสดงเพิ่มเติม" ก่อนสร้าง accordion ที่กำหนดเอง