Get Adobe Flash player

การสร้างปุ่มปิดซ่อนข้อความ ด้วย html

ในการเขียนบล๊อกหรือเว็บไซต์ บางครั้งผู้เขียนอาจต้องการใส่ลูกเล่นในการซ่อนข้อความบางอย่างไม่ให้แสดง และให้ผู้อ่านสามารถเลือกปิด-เปิดข้อความเองได้ เช่น

เมื่อกดปุ่ม ข้อความที่ซ่อนจะปรากฏ…

วิธีการซ่อนข้อความดังกล่าวสามารถทำได้ดังนี้

จากโค้ด จะแบ่งคร่าวๆได้ 2 ส่วน คือ
1. ส่วนที่เกี่ยวกับปุ่มที่ใช้สั่งเปิดหรือปิดข้อความ จะอยู่ภายใต้แท็ก <button>  ซึ่งสามารถกำหนดค่า id ให้กับปุ่มในส่วนของ getElementById(‘ชื่อไอดี’) (ในตัวอย่างใช้ชื่อไอดีว่า spoiler) เพื่อใช้แยกแยะแต่ละปุ่ม

ส่วนข้อความที่แสดงบนปุ่มนั้น สามารถกำหนดในตำแหน่งที่วงด้วยเส้นสีเขียว (ในตัวอย่างใช้คำว่า เปิด/ปิด)

2. ส่วนที่เกี่ยวข้องกับข้อความ จะอยู่ภายใต้แท็ก <div> ซึ่งเราจะสามารถใส่ข้อความที่ต้องการซ่อนลงไปในตำแหน่งที่วงด้วยเส้นสีม่วง

 

ทั้งนี้ ในการสร้างปุ่มซ่อนข้อความ สามารถกำหนดให้แสดงข้อความใต้ปุ่มหรือแสดงข้อความเหนือปุ่มก็ได้ โดยการเรียงโค้ดทั้งสองส่วนตามลำดับ เช่น ถ้าอยากให้ข้อความอยู่เหนือปุ่ม ให้เขียนโค้ดส่วนที่ 2 ขึ้นก่อนโค้ดส่วนแรก

Credit : http://www.allbloggertricks.com/2013/05/how-to-add-openclose-button-to-blogger.html

Leave a Reply

Your email address will not be published. Required fields are marked *