elements details และ summary ให้อะไร?

Question

Accepted Answer

`

` และ `

` สร้าง **native disclosure widget** — ส่วนที่ขยายได้/ยุบได้ — **โดยไม่มี JavaScript** บราวเซอร์จัดการการสลับ การรองรับแป้นพิมพ์ และการเข้าถึงสำหรับคุณ ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** คือป้ายกำกับที่คลิกได้ (ลูกแรก) - ทุกอย่างหลังจากนั้นคือเนื้อหาที่ยุบได้ - การคลิกที่สรุปจะสลับเปิด/ปิด — เข้าถึงได้จากแป้นพิมพ์โดยเนื้อแท้ (Enter/Space) และประกาศโดยตัวอ่านหน้าจออย่างถูกต้อง ## เปิดตามค่าเริ่มต้น & การตรวจจับสถานะ ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## จัดรูปแบบเครื่องหมาย ```css 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 เพื่อการเข้าถึง — ตอนนี้เป็นเพียงแท็กความหมายสองแท็ก ## ทำไมมันถึงสำคัญ `

`/`

` ให้เนื้อหาที่ยุบได้ที่เข้าถึงได้ เป็นมิตรกับแป้นพิมพ์ โดยไม่มี JS และไม่มี ARIA ด้วยตนเอง — ตัวอย่างที่สมบูรณ์แบบของการใช้แพลตฟอร์ม ใช้สำหรับ FAQ และรูปแบบ "แสดงเพิ่มเติม" ก่อนสร้าง accordion ที่กำหนดเอง