[jQuery] - Content Spoiler การซ่อน/แสดงเนื้อหา บางส่วนใน Blogger ด้วยjQuery toggle

วิธีสร้าง jQuery toggle เพื่อใช้ในการซ่อน/แสดงเนื้อหา

บทความนี้เป็น Trick ในการใช้จาวาสคริปต์มาทำให้ blog ของเรามีสไตล์มากขึ้นอีกหนึ่งบทความ โดยเราสามารถสร้าง หัวข้อของบทความ หรือหัวข้อที่ sidebar ที่ต้องการให้มีการซ่อน/แสดงเนื้อหาได้

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

วิธีติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

ขั้นที่ 1 เป็นการติดตั้ง CSS โค้ดทำโดย

ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว

#toggle-view {list-style:none;font-family:arial;font-size:11px;margin:0;padding:0;width:250px;}
#toggle-view li {margin:10px;border-bottom:1px solid #ccc;position:relative;cursor:pointer;}
#toggle-view h3 {margin:0;font-size:14px;}
#toggle-view span {position:absolute;right:5px; top:0;color:#ccc;font-size:13px;}
#toggle-view p {margin:5px 0;display:none;}

 หมายเหตุขั้นที่ 1: ความกว้าง 250 สามารถปรับให้เหมาะสมกับตำแหน่งที่ติดตั้งครับ

ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว จากนั้นบันทึกแม่แบบครับ

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

<script type="text/javascript">
$(document).ready(function () {
    $('#toggle-view li').click(function () {
        var text = $(this).children('p');
        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');      
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');      
        }
    });
});
</script>

หมายเหตุขั้นที่2 : ถ้าหากคุณเคยติดตั้ง jQuery 1.3.2 ไปใน templates แล้วก็ไม่ต้องติดตั้งซ้ำครับ ลบโค้ดบรรทัดบนทิ้งไปได้เลย



ขั้นที่ 3 เป็นการติดตั้ง HTML ซึ่งสามารถวาติดตั้งโค้ดต่อไปนี้ได้หลายวิธี เช่น

3.1 วางโค้ดลงไปในขณะเขียนบทความก็ได้



3.2 อาจจะใช้วิธี Add Gedget ชนิด HTML/Java script แล้ววางโค้ดต่อไปนี้ลงไปก็ได้เช่นกัน (ขึ้นอยู่กับความต้องการของคุณ)

โค้ด

<ul id="toggle-view">

<li>
<h3>ใส่หัวข้อหรือโค้ดรูปภาพที่ 1</h3>
<span>+</span>
<p>ข้อความหรือโค้ดรูปภาพที่ต้องการซ่อนแสดง</p>
</li>

<li>
<h3>ใส่หัวข้อหรือโค้ดรูปภาพที่ 2</h3>
<span>+</span>
<p>ข้อความหรือโค้ดรูปภาพที่ต้องการซ่อนแสดง</p>
</li>

<li>
<h3>ใส่หัวข้อหรือโค้ดรูปภาพที่ 3</h3>
<span>+</span>
<p>ข้อความหรือโค้ดรูปภาพที่ต้องการซ่อนแสดง</p>
</li>

</ul>

แก้โค้ดสีแดงและสีน้ำเงินแล้วติดตั้งลงไปก็จบขั้นตอนครับ
ที่มา : http://www.hackublog.com/2010/01/jquery-toggle.html

• DEMO 1

  + แสดงข้อความ DEMO 1
  

• DEMO 2

  + ลิ้ง แต่งบล็อก
  

• DEMO 3

  +