รันสคริปต์เมื่อผู้ใช้เปิด/ปิดองค์ประกอบ <details> ใน HTML

เมื่อผู้ใช้เปิดหรือปิดองค์ประกอบ <details> เหตุการณ์ ontoggle จะทำงาน คุณสามารถลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์เหตุการณ์ ontoggle:

ตัวอย่าง

<!DOCTYPE html> 
<html> 
  <body> 
    <h2>รายละเอียด</h2> 
    <p>คุณต้องเข้าทำงานตั้งแต่ 23 กุมภาพันธ์</p> 
    <details ontoggle="display()"> 
      <summary>ข้อมูลเพิ่มเติม</summary> 
      <p>เวลา: 9 ถึง 17:30</p> 
      <p>สถานที่: ฮายเดอราบาด</p> 
    </details> 
    <script> 
      function display() { 
        var details = document.querySelector('details');
        if (details.open) {
          alert("เปิดดูข้อมูล: เวลา, สถานที่ ฯลฯ");
        } else {
          alert("ปิดซ่อนข้อมูล");
        }
      } 
    </script> 
  </body> 
</html>

รายละเอียด:

• ontoggle ทำงานเมื่อสถานะเปิด/ปิดเปลี่ยน (open attribute เพิ่ม/ลบ)
• ตรวจสอบสถานะด้วย details.open (boolean)
• สามารถใช้ details.addEventListener('toggle', handler) แทน inline handler