HTML5 การใช้งาน details Tag

<details>
  <summary>คลิกที่นี่เพื่อดูรายละเอียด</summary>
  <p>นี่คือเนื้อหาที่ซ่อนอยู่ภายในแท็ก details</p>
</details>

<details>
  <summary>วิธีทำเค้กช็อกโกแลต</summary>
  <p>1. เตรียมส่วนผสมของเค้ก</p>
  <p>2. ผสมส่วนผสมทั้งหมด</p>
  <p>3. อบเค้กในเตาอบที่อุณหภูมิ 180 องศาเซลเซียสเป็นเวลา 30 นาที</p>
</details>

<details>
  <summary>ถาม: การสมัครสมาชิกต้องทำอย่างไร?</summary>
  <p>ตอบ: คุณสามารถสมัครสมาชิกได้ผ่านหน้าเว็บไซต์ของเราภายใต้เมนู 'สมัครสมาชิก'</p>
</details>

<details>
  <summary>ถาม: ค่าธรรมเนียมการสมัครสมาชิกคือเท่าไหร่?</summary>
  <p>ตอบ: ค่าสมัครสมาชิกอยู่ที่ 500 บาทต่อปี</p>
</details>

<details>
  <summary>คลิกเพื่อดูโค้ด JavaScript</summary>
  <pre>
function sayHello() {
  console.log('Hello, World!');
}
sayHello();
  </pre>
</details>

<form>
  <label for="name">ชื่อ:</label>
  <input type="text" id="name" name="name">

  <details>
    <summary>ข้อมูลเพิ่มเติม</summary>
    <p>กรุณากรอกข้อมูลส่วนบุคคลเพื่อใช้ในการติดต่อกลับ</p>
  </details>

  <input type="submit" value="ส่งข้อมูล">
</form>

<style>
  summary {
    font-weight: bold;
    cursor: pointer;
  }
  details[open] p {
    color: green;
  }
</style>

<details>
  <summary>ข้อเสนอพิเศษ</summary>
  <p>คุณได้รับส่วนลด 20% สำหรับการสั่งซื้อครั้งต่อไป!</p>
</details>

<details open>
  <summary>รายละเอียดที่เปิดอยู่ตั้งแต่เริ่มต้น</summary>
  <p>เนื้อหานี้จะถูกแสดงเมื่อโหลดหน้าเว็บ</p>
</details>