วิธีระบุรายละเอียด (Details) ให้มองเห็นได้ใน HTML

ใช้แอตทริบิวต์ open เพื่อระบุว่ารายละเอียด (Details) ควรแสดงให้ผู้ใช้มองเห็นตั้งแต่แรก แท็ก <details> และ <summary> ใช้ร่วมกันสร้าง Disclosure Widget (เนื้อหาที่ซ่อน/แสดงได้)

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ open:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML open attribute</title>
  </head>
  <body>
    <details open>
      <summary>Some More Information</summary>
      <p>Providing more info about the details here.</p>
    </details>
    
    <details>
      <summary>Click to expand</summary>
      <p>This content is hidden by default.</p>
    </details>
  </body>
</html>

การทำงานของ <details> และ <summary>

<details> - ห่อหุ้มเนื้อหาที่ซ่อน/แสดงได้
<summary> - ส่วนหัวที่มองเห็นได้เสมอ คลิกเพื่อ toggle
open - แสดงเนื้อหาตั้งแต่โหลดหน้า (ไม่มี = ซ่อนอยู่)

การจัดสไตล์ด้วย CSS

details {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  background: #fafafa;
}

summary {
  cursor: pointer;
  font-weight: bold;
  list-style: none; /* ซ่อน marker เริ่มต้น */
}

summary::-webkit-details-marker {
  display: none; /* ซ่อน marker ใน WebKit */
}

summary::before {
  content: "▶ ";
  transition: transform 0.2s;
}

details[open] summary::before {
  content: "▼ ";
}

details[open] {
  background: #fff;
  border-color: #ccc;
}

การควบคุมด้วย JavaScript

<details id="myDetails">
  <summary>Details</summary>
  <p>Content...</p>
</details>

<script>
const details = document.getElementById('myDetails');

// เปิด
details.open = true;

// ปิด
details.open = false;

// ตรวจสอบสถานะ
console.log(details.open); // true/false

// Event เมื่อเปิด/ปิด
details.addEventListener('toggle', () => {
  console.log('Toggled:', details.open ? 'open' : 'closed');
});
</script>

การใช้งานร่วมกับ Form

<form>
  <details>
    <summary>Advanced Options</summary>
    <label><input type="checkbox" name="opt1"> Option 1</label><br>
    <label><input type="checkbox" name="opt2"> Option 2</label>
  </details>
  <button type="submit">Submit</button>
</form>

ข้อมูลใน <details> จะส่งไปกับฟอร์มได้ปกติ ไม่ว่าจะเปิดหรือปิด