Tạo Khung Accordion với jQuery

Dạo qua nhiều blog, chắc hẳn các bạn đều đã từng thấy widget mới có tên Accordion.ấy tab-widget thường hay được sử dụng trên Blogger. Nếu đã cảm thấy nhàm chán với loại tab-widget ấy, thì hôm nay mình xin giới thiệu đến các bạn một loại 

Accordion

Widget Accordion là một dạng box-widget có khả năng trượt Hiện/Ẩn khi click chuột. Được viết trên nền jQuery , Accordion sẽ hoạt động khá 1 mượt khi sử dụng thay vì đơn giản như các loại widget thông thường.

Lúc trước, template của Blog Tin Học đã từng cài widget này, nhưng do cảm thấy vị trí phân bố không thích hợp nên đành gỡ bỏ. Nếu bạn cảm thấy ưng ý với Accordion, hãy thực hiện các bước sau để tạo widget này cho Blog mình nhé :

1. Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
2. Thêm đoạn code bên dưới vào ngay trên thẻ </head>
   
   <script src='http://code.jquery.com/jquery.js' type='text/javascript'/>
   <style type='text/css'>
   
   /* Main accordion container */
   .accordion{
   width:500px;
   }
   
   /* accordion content div, default display is hidden */
   .accContent{
   display:none;
   border:1px solid #CCCCCC;
   padding:3px;
   }
   
   /* Title links (clickable to show their content and hide others) */
   .acctitle{
   display:block;
   width:100%;
   padding:3px 3px 3px 3px;
   background-color:#CC0000;
   color:#FFFFFF;
   cursor:pointer
   }
   
   /* Default accordion class (usually first one so it is always visible) */
   .defaultAccordion{
   display:block;
   
   }
   </style>
3. Thêm đoạn code bên dưới vào ngay dưới thẻ </head>
   
   <script type='text/javascript'>
   $(function(){
       // loop though each link
       $(&quot;a.acctitle&quot;).each(function(){
           // add an event on click
           $(this).click(function(){
               // hide all div&#39;s with accContent class
               $(&quot;.accContent&quot;).each(function(){
                   $(this).hide(&quot;slow&quot;);
               });
   
               // the main point of this script - Fetch ref attribute of
               // title link and display the hidden div with that id
               $(&quot;#&quot;+$(this).attr(&quot;ref&quot;)).show(&quot;slow&quot;);
                   return;
                 });
       });
   });
   </script>
4. Save lại template, rồi chuyển sang tab Phần tử trang (Page Elements) . Tạo một widget HTML/Javascript với nội dung như sau :
   
   <div class="accordion">
       <a ref="first_section" class="acctitle">First Section (đây là title)</a>
       <div id="first_section" class="accContent defaultAccordion">
       <p>First Accordion Section (đây là content)</p>
       </div>
   
       <a ref="second_section" class="acctitle">Second hidden Section</a>
       <div id="second_section" class="accContent">
           <p>2nd Accordion Section</p>
       </div>
   
       <a ref="third_section" class="acctitle">Third Hidden Section</a>
       <div id="third_section" class="accContent">
           <p>Last Accordion Section</p>
       </div>
   </div>
5. Hiệu chỉnh nội dung widget trên theo ý thích rồi save lại template.

Hiệu chỉnh Accordion

- Đầu tiên, bạn cần thay những vùng text được tô màu đỏ thành những nội dung từ Blog bạn.
- Bạn lưu ý thứ tự của các section trong 2 mục ref= và id= phải giống nhau. 
- Ngoài ra , bạn còn có thể hiệu chỉnh các thông số của code màu lục để khung Accordion mang dáng vẻ phù hợp với Blog của bạn.
- Cuối cùng, để thêm section khác cho khung Accordion, bạn chỉ việc copy đoạn code tương ứng, tăng thứ tự của section trong 2 mục ref= và id= và tinh chỉnh vùng text được tô màu đỏ .

P/s : Nếu còn thắc mắc, hãy để lại comment cho mình. Mình sẽ cố gắng trả lời nhanh nhất. Hy vọng bạn thích thủ thuật này. Chúc thành công !

Nguồn boyprodx.blogspot.com