วิธีสร้าง jQuery Accordion Sidebar แบบซ่อน/แสดงได้

บทความนี้เป็น Trick ในการซ่อน/แสดง Sidebar หรือก็คือ Gadget ด้านข้างนั่นเองครับ การซ่อนแสดงนี้จะช่วยให้หน้าหลักของบล็อกไม่รกจนเกินไป ช่วยประหยัดพื้นที่ได้มาก และยังช่วยให้บล็อกของคุณดูเป็นมืออาชีพมากขึ้นด้วย

ตัวอย่าง : ตัวอย่างผลงานที่ได้จากบทความดได้ที่ Sidebar ของบล็อกของผมครับ หรือจะดูจากภาพด้านล่างก็ได้

Accordion
การติดตั้ง Script นี้ทำได้ง่ายมาก เพียงแต่เราต้องเข้าใจการตั้งค่าเท่านั้น

วิธีติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ  >> แก้ไข HTML  >> ค้นหา code </head> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้า

<!--Accordion-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);

var sidebarnameacc2=&quot;sidebar1&quot;;
var accordionside1=false;
var sideshow1=new Array(0,0);

</script>
<script src='http://hackublog.googlecode.com/files/accordion.v101-min.js' type='text/javascript'/>
<!--Accordion End-->


จากนั้นก็แก้ไขโค้ด (วิธีแก้โค้ดอ่านเพิ่มด้านล่าง) ตามต้องการแล้วบันทึกแม่แบบก็เป็นอันจบขั้นตอนครับ



วิธีตั้งค่า

1. sidebarnameacc1 ก็คือค่าของ id ซึ่งโดยทั่วไปจะชื่อว่า “sidebar” แต่บาง Template อาจจะใช้ id เป็นอย่างอื่น

วิธีดูชื่อของ id ทำได้ดังนี้ครับ

ไปที่แผงควบคุม >>รูปแบบ >> แก้ไข  HTML > ค้นหาคำว่า “sidebar-wrapper” ซึ่งจะพบโค้ดที่มีลักษณะคล้ายกับโค้ดต่อไปนี้

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>


โค้ดสีแดงก็คือค่าของตัวแปร sidebarnameacc1 ซึ่งหมายความว่า สิ่งที่เราทำจะมีผลต่อ id ตัวนี้ แต่… หาก id ใน template ของคุณเป็นอย่างอื่นก็กลับไปแก้ชื่อของ id ในโค้ดสีเขียวในขั้นตอนการติดตั้ง ให้เหมือนกับ id ของคุณเองได้

เช่น ถ้า id ของคุณชื่อ right-sidebar ก็แก้ไขโค้ดให้เป็น

var sidebarnameacc1=&quot;right-sidebar&quot;;


2. accordionside1 คือตัวแปรที่จะกำหนดการซ่อนแสดง โดย

ถ้าตั้งค่าเป็น true ก็จะทำให้เมื่อเราแสดง gadget ที่ sidebar อันหนึ่ง อีกอันหนึ่ง(ที่เปิดอยู่) ก็จะปิดไปโดยอัตโนมัติ

และถ้าหากตั้งค่าเป็น false การซ่อน/แสดง gadget ที่ sidebar แต่ละอัน สามารถซ่อน/แสดง ได้แบบไม่ส่งผลต่อ gadget อื่นๆ


3. sideshow1 คือการตั้งค่า default ว่าจะให้ gadget บน sidebar ที่เท่าไรแสดงผลบ้าง

0 = gadget แรกบน sidebar
1 = gadget ที่ 2 บน sidebar

ดังนั้นถ้าต้องการแสดงเพียง gadget แรก ก็จะต้องตั้งค่าเป็น

var sideshow1=new Array(0,0);

ถ้าต้องการแสดง gadget ที่ 2 อย่างเดียวก็ตั้งค่าเป็น

var sideshow1=new Array(1,1);

ถ้าต้องการแสดง gadget ที่ 4 อย่างเดียวก็ตั้งค่าเป็น

var sideshow1=new Array(3,3);

ถ้าต้องการแสดง gadget ที่ 1 และ 2 พร้อมกันก็แก้โค้ดเป็น

var sideshow1=new Array(0,1);

และในทำนองเดียวกันถ้าต้องการแสดง gadget ที่ 1-4 ก็แก้เป็น

var sideshow1=new Array(0,1,2,3);
เป็นต้น


4. สำหรับโค้ด

var sidebarnameacc2=&quot;sidebar1&quot;;
var accordionside1=false;
var sideshow1=new Array(0,0);


ใช้ในกรณีคนที่ใช้ Template ที่มี 3 คอลัมม์เท่านั้น (ดังนั้นใครมี 2 คอลัมน์จะลบโค้ดนี้ทิ้งก็ได้เลยครับ)  วิธีตั้งค่าก็ทำซ้ำเช่นเดียวกับข้อ 1-3 ครับ


อาจจะงงงวยกันเล็กน้อยกับการตั้งค่าครับ หากตั้งแล้วงง ๆ ก็สอบถามมาได้เลยครับ และเพื่อให้ง่ายต่อการช่วยเหลือก็ฝากลิงค์บล็อกเอาไว้ด้วยนะครับ สวัสดีครับ

Credit : Abu fahan.Com + i-marco.nl

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

  1. เง้อมี Array ด้วย นึกถึงวิชาเขียนโปรแกรมขึ้นมาทันที

  1. มีวิธีทำเมูนู Tab menu ไหมครับ เหมือน blog www.jackbook.com
    ขอบคุณครับ

  1. มีครับ ลองเลือกดูจากบทความเหล่านี้ครับ

    http://hackublog.blogspot.com/2009/12/tabber-sidebar.html

    http://hackublog.blogspot.com/2009/10/tab-2.html

    http://hackublog.blogspot.com/2009/10/tab-menu-1.html

    ที่เหลือผมยังไม่ได้เขียนบทความเอาไว้ เพียงแค่ร่างบทความไว้เท่านั้นครับ

  1. http://v-apple.blogspot.com/

    ทำแล้วมันกดแล้วมันไม่แสดงอะครับ

  1. ตอนนี้ทำได้แล้ว

  1. bebetalal

    อยากให้ซ่อนแค่อันสุดท้ายอันเดียว แต่มันซ่อนหมดเลยค่ะ
    ทำครั้งแรกมันไม่ซ่อนเลย พอทำใหม่แล้วแต่ค่ะ แต่หลัง ๆ นี่ซ่อนหมดเลย

    http://nutsarablog.blogspot.com/

    ส่วนข้างบนสุด ที่เห้นเป้นสีชมพูระหว่างสีดำ มันคือปุ่ม ส่งอีเมลถึงฉัน

  1. สวัสดีครับคุณ bebetalal

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

    หรือให้ตั้งค่าตามนี้ครับ


    นี่คือโค้ดของคุณตอนนี้
    <!--Accordion-->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    var sidebarnameacc1="sidebar";
    var accordionside1=true;
    var sideshow1=new Array(5,5);
    </script>
    <script src='http://hackublog.googlecode.com/files/accordion.v101-min.js' type='text/javascript'></script>
    <!--Accordion End-->

    ให้แก้เป็น

    <!--Accordion-->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    var sidebarnameacc1="sidebar";
    var accordionside1=false;
    var sideshow1=new Array(5,5);
    </script>
    <script src='http://hackublog.googlecode.com/files/accordion.v101-min.js' type='text/javascript'></script>
    <!--Accordion End-->

    เท่านี้ก็ได้อย่างที่ต้องการแล้วครับผม

  1. แก้แล้วค่ะ ยังซ่อนหมดเหมือนเดิม

  1. ตอบคุณ bebetalala

    ผมนับจำนวน Widget ของคุณแล้วมี 5 อันนะครับ

    ดังนั้นถ้าจะแสดงเฉพาะอันที่ 5 ต้องแก้ค่าเป็น

    var sideshow1=new Array(4,4);

    0 หมายถึงอันแรก
    1 หมายถึงอันที่สอง
    ...
    4 หมายถึงอันที่ 5 ครับ

    ขออภัยด้วยตอนแรกผมไม่ได้นับ gadget ของคุณ

  1. ทำได้แล้วค่ะ ขอบคุณค่ะ ถามอีกนิดนะคะ
    คือโค้ดนี้จะทำให้ซ่อนทุกอัน ถ้าเราจะให้อันไหนแสดง(คือมีโชว์อยู่เหมือนเดิม)เราก็แก้เป็น false และแก้ตัวเลขในวงเล็บ(x,x) ใช่มั้ยคะ

  1. ใช่ครับโค้ดที่ให้ไว้เป็นโค้ดที่โชว์เฉพาะอันแรกครับ และเมื่อคลิกอันใดอันหนึ่ง อันที่เหลือก็จะปิดไป

    ถ้าอยากให้แสดงแต่ละอันโดยไม่กระทบกับอันอื่นก็ปรับให้เป็น false ตามที่ถามครับ

    ส่วนค่าในวงเล็บก็แก้ตามใจชอบโดยดูตามวิธีปรับที่ได้อธิบายไว้ครับ

  1. กำลังทำjquery accordion sidebarแต่หาโค๊ด sidebar-wrapper ไม่เจอครับ งงเลย ไปต่อไม่ถูก ทำงัยดีครับ http://healthatwill.blogspot.com/

  1. แม่แบบของคุณบงกชใช้ ไอดี sidebar-right-1 ครับ

  1. เย้...ทำได้แล้วครับ ขอบคุณมากครับ....

  1. สอบถามว่า ตอนเลื่อนเมนูลงมา ถ้าหลังจากคลิ๊กเข้าไป
    ต้องการให้ เมนูอยู่คงเดิม ต้องแก้code ตรงไหนครับ

  1. มีแบบซ่อน แล้วเอาเมาส์ไปโดนแต่ยังไม่คลิกแล้วแสดงไหมครับ

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

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

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