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

jquerytoogle


บทความนี้เป็น 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 วางโค้ดลงไปในขณะเขียนบทความก็ได้

image 

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

image

โค้ด
<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>


แก้โค้ดสีแดงและสีน้ำเงินแล้วติดตั้งลงไปก็จบขั้นตอนครับ

เครดิตสคริปต์ : queness.com
Hack to Blogger : Hackublog

ตอนนี้มีความคิดเห็น : 2 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

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

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel