การซ่อน/แสดง เนื้อหาบทความบางส่วน (Hide/Show, Expand/Collapse - post element)

สำหรับการเขียนบทความบางเรื่อง เราอาจจะต้องการซ่อนเนื้่อหาเสริมหรือส่วนขยายของบทความบางส่วนเพื่อให้คนที่เข้าใจในเรื่องนั้นๆ ดีอยู่แล้วไม่ต้องเสียเวลาอ่านเนื้่อหาในส่วนนั้นมากจนเกินไป ยกตัวอย่างจากการซ่อนเนื้อหาจากข้างล่างนี้เพื่อความเข้าใจมากยิ่งขึ้น

ตัวอย่างการซ่อน/แสดง เนื้อเพลง ก้อนหินก้อนนั้น
+/-

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

* ไม่มีอะไรจะทำร้ายเธอ ได้เท่ากับเธอทำตัวของเธอเอง ให้เธอคิดเอาเอง ว่าชีวิตของเธอเป็นของใคร
ไม่มีอะไรจะทำร้ายเธอ ถ้าเธอไม่รับมันมาใส่ใจ ถูกเขาทำร้าย เพราะใจเธอแบกรับมันเอง

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

(*,*)
ถูกเขาทำร้าย เพราะใจเธอรับไว้เอง ...

ขั้นตอนการทำมีดังต่อไปนี้

ขั้นตอนที่ 1 ไปที่ รูปแบบ|แก้ไข HTML ไม่ต้องเลือกขยายแม่แบบเครื่องมือ (Layout|Edit HTML -> NOT check the "Expand Widget Templates" check box)

ขั้นตอนที่ 2 ค้นหาคำว่า ]]></b:skin> แล้วคัดลอกโค๊ดด้านล่างนี้ไว้ด้านบน

.commenthidden {display:none}
.commentshown {display:inline}

ขั้นตอนที่ 3 ค้นหาคำว่า </head> แล้วคัดลอกโค๊ดด้านล่างนี้ไว้ด้านบน

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

ขั้นตอนที่ 4 ทำการบันทึกแม่แบบ

ขั้นตอนที่ 5 แทรกโค๊ดดังต่อไปนี้ในส่วนของบทความที่ต้องการซ่อน/แสดง

<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">+/-</a><div class="commenthidden" id="UNIQUE NAME"><p>บทความส่วนที่ต้องการซ่อน/แสดง</div>

*UNIQUE NAME คือ ค่าอะไรก็ได้ที่ไม่ซ้ำกันในทุกๆ บทความที่เราทำการซ่อน/แสดง ในที่นี้ผมใช้คำว่า "post001" สำหรับบทความแรกที่มีการใช้คำสั่งนี้และจะเป็นชื่อ "post002" สำหรับบทความที่ทำคำสั่งนี้ถัดไป
*บทความส่วนที่ต้องการซ่อน/แสดง ก็คือส่วนที่ต้องการซ่อนนั่นเอง ให้พิมพ์ในส่วนนี้ในขณะที่เราทำการเขียนบทความ
*ในส่วนของเครื่องหมาย +/- เราสามารถเปลี่ยนเป็นคำอื่นๆ ได้ตามต้องการ เช่น ซ่อน/แสดง เป็นต้น

เมื่อทำการเขียนบทความเสร็จเรียบร้อยและทำการบันทึกแล้ว ส่วนที่ซ่อน/แสดง จะแสดงเครื่องหมาย+/-

นี่ก็เป็นลูกเล่นเล็กๆ น้อยๆ ครับ เพื่อให้บล็อกเรามีสีสันเพิ่มขึ้น