สปอยเลอร์ด้วย JavaScript

ตอนนี้เราจะมาเรียนรู้วิธีการสร้างสปอยเลอร์ สปอยเลอร์ที่ผมพูดถึงคือบล็อกที่สามารถ เปิดออก หรือปิดได้โดยใช้ลิงก์พิเศษ

ในตัวอย่างโค้ดต่อไปนี้ ย่อหน้าที่มีคลาส spoiler เป็นสปอยเลอร์ และลิงก์ ที่มีคลาส toggle ควรจะคลิกเพื่อแสดง หรือซ่อนสปอยเลอร์นี้:

html<p>
  ย่อหน้าที่มีข้อความ
  <a href="" class="toggle">เปิด</a>
</p>
<p class="spoiler">
  สปอยเลอร์ที่ซ่อนอยู่
</p>
<p>
  ย่อหน้าที่มีข้อความ
</p>

ในเนื้อหา แน่นอนว่าสามารถมีสปอยเลอร์ได้หลายอัน และแต่ละอันควรจะมีลิงก์ของตัวเอง:

html<p>
  ย่อหน้าที่มีข้อความ
</p>
<p>
  ย่อหน้าที่มีข้อความ
  <a href="" class="toggle">เปิดสปอยเลอร์ 1</a>
</p>
<p class="spoiler">
  สปอยเลอร์ที่ซ่อนอยู่ 1
</p>
<p>
  ย่อหน้าที่มีข้อความ
</p>
<p>
  ย่อหน้าที่มีข้อความ
  <a href="" class="toggle">เปิดสปอยเลอร์ 2</a>
</p>
<p class="spoiler">
  สปอยเลอร์ที่ซ่อนอยู่ 2
</p>
<p>
  ย่อหน้าที่มีข้อความ
</p>

เห็นได้ชัดว่าต้องมีการเชื่อมโยงลิงก์สำหรับเปิด และสปอยเลอร์นั้นเอง สามารถคิดได้หลายวิธี แต่ในกรณีนี้ผม ขอเสนอให้ทำตามตำแหน่ง: สมมติว่า ลิงก์ที่มีคลาส toggle เปิด หรือปิดองค์ประกอบที่มีคลาส spoiler ที่อยู่ถัดจากผู้ปกครองของลิงก์นี้ทันที

ให้สปอยเลอร์ถูกซ่อนไว้โดยค่าเริ่มต้น และ ถ้าเราต้องการให้มันแสดง - เราจะให้ คลาส active แก่มัน ลองเขียนโค้ด CSS ที่สอดคล้องกัน:

css.spoiler:not(.active) {
  display: none;
}