แท็ก details

แท็ก details สร้างสปอยเลอร์ใน HTML, นั่นคือใช้สำหรับข้อมูลที่ สามารถซ่อนหรือแสดงได้ตามความต้องการของผู้ใช้

โดยค่าเริ่มต้นเนื้อหาภายในแท็กจะถูกซ่อนไว้ สำหรับการแสดงตามคำขอของผู้ใช้ควร เพิ่มแท็ก summary ซึ่งระบุหัวข้อ สำหรับแท็ก details หัวข้อนี้จะ มองเห็นได้บนหน้าเสมอ (แม้ว่าเนื้อหาของ details จะอยู่ในสถานะถูกยุบ) และสามารถ คลิกที่มันเพื่อขยายข้อความที่ซ่อนไว้ หรือยุบได้

นอกจากนี้สำหรับการแสดงเนื้อหาที่ซ่อนอยู่สามารถ ใช้แอตทริบิวต์ open ของแท็ก details ได้ (ตัวอย่างเช่น สำหรับการแสดงเนื้อหาของ details โดยใช้ JavaScript)

ตัวอย่าง

มาดูกันว่าแท็ก details ทำงานอย่างไร:

html<details>
  <summary>click me</summary>
  hidden text
</details>

Результат:

ดูเพิ่มเติม