Konsep Dasar Pemakaian Sidebar Accordion

Baca Juga

Sagitarius Kusadhi - Kali ini saya akan memberikan tutorial pemakaian dan bagaimana cara kerjanya Konsep Dasar Sidebar According. Namun Bagi yang Suka dengan Hal yang Praktis, Baca Saja postingan saya yang sebelumnya, Okey Kita mulai saja.

 

Cara Membuat Sidebar Accordion

Pada umumnya HTML yang membungkus sidebar adalah kurang lebih seperti ini:

<div id="sidebar-wrapper">
Facebook adalah salah satu media sosial yang pastinya banyak sekali manfaatnya....
</div>

Dan setelah terdapat widget yang terpasang, maka kode HTML-nya kurang lebih seperti ini:

HTML 

<div id="sidebar-wrapper">   
    <div>       
        <h2><a href="#">Section 1</a></h2>       
        <div>           
            <p>isi isi isi isi.</p>       
        </div>   
    </div>   
<div>

Untuk membuat efek accordion, kita akan menggunakan jQuery. dan yang akan kita beri efek adalah #sidebar-wrapper h2 dan #sidebar-wrapper.

var stop = false; $("#sidebar-wrapper h2").click(function(event) { $(this).closest('div').prependTo('#sidebar-wrapper'); }); $("#sidebar-wrapper").accordion({ header: "> div > h2" }).sortable({ axis: "y", handle: "h2" });

Jika belum paham maksudnya, lebih baik anda mencobanya sendiri. Sobat blogger juga ingin belajar, silahkan menuju link ini: klik me!!