Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Tip: Membuat Sidebar Akordion dengan JQuery

Bagi Anda yang suka menelusuri artikel-artikel potongan kode di sini mungkin pernah sekali dua kali melihat halaman ini » Tambahkan State Aktif untuk JQuery Accordion. Kali ini Saya akan membantu Anda untuk mengerti lebih dalam tentang salah satu manfaat besar dari potongan kode tersebut.

Pernahkan Anda memperhatikan sidebar blog Anda dan menyadari bahwa susunan elemen yang ada pada sidebar tersebut sebenarnya sama persis dengan kerangka akordion yang pernah Anda lihat di halaman tersebut?

Mari kita coba mengambil sudut pandang ini:

Kerangka Sidebar dan Widget pada Template Blogspot
Kerangka sidebar pada dasarnya bisa kita jadikan sebagai panel-panel akordion.

Setiap sidebar biasanya dibungkus oleh elemen #sidebar-wrapper dimana di dalamnya terdapat beberapa widget yang selalu terdiri dari elemen <h2> dan elemen tubuh widget itu sendiri seperti ini:

<div id='sidebar-wrapper'>
    <h2>Blogger templates</h2>
    <div class='widget-content'>
        ....
    </div>
    <h2>Blogroll</h2>
    <div class='widget-content'>
        ....
    </div>
    <h2>Labels</h2>
    <div class='widget-content'>
        ....
    </div>
</div>

Jika Anda teliti dengan baik, ternyata model kerangka di atas sama persis dengan kerangka yang ada pada percobaan JQuery akordion yang pernah Saya tuliskan:

<div id='accordion'>
    <h2>Panel 1</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 2</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 3</h2>
    <div class='content'>
        ....
    </div>
</div>

Itulah kesempatan Anda untuk menjadi kreatif hari ini. Kali ini kita akan menciptakan sidebar dengan efek akordion hanya dengan bermodalkan ide tersebut. Pertama-tama, tentunya harus kita ketahui beberapa elemen yang sama sebagai pemandu dan itu akan kita gunakan untuk memodifikasi potongan kode efek akordion ini:

$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Sebagai contoh, elemen #accordion memiliki peran yang sama persis dengan elemen #sidebar-wrapper dan elemen .content juga memiliki peran yang sama dengan elemen .widget-content. Elemen h2 tidak perlu dipertanyakan lagi. Kesimpulannya adalah, untuk menciptakan sidebar akordion setidaknya kita harus memodifikasi kode di atas menjadi seperti ini:

$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Ya, cuma begitu saja modal dasar untuk menciptakan efek akordion pada sidebar. Asalkan kita sudah menemukan ID sidebar yang ingin kita jadikan sebagai target, maka sisanya tinggal melakukan beberapa modifikasi kecil saja.

Langkah-Langkah Membuat Sidebar Akordion

Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode ini:

</head>

Salin kode di bawah ini dan letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');

    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut.
Sekarang coba simpan template Anda dan lihat apa yang terjadi pada sidebar blog Anda...

Tidak berhasil?

Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:

<div id='sidebar-wrapper-2'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>

Atau Anda juga bisa melihat ID sidebar secara langsung dari halaman blog Anda melalui Add-on Firebug atau aplikasi web developer sejenis lainnya:

Melihat ID Sidebar dengan Firebug
Melihat ID Sidebar dengan Firebug

Nah, Anda bisa mengganti kode #sidebar-wrapper dengan ID yang Saya beri garis bawah untuk menciptakan efek akordion pada sidebar tersebut.

Satu tambahan lagi: Saat Anda mencoba menyentuh judul widget biasanya akan terasa sesuatu yang sedikit mengganjal. Ya, kursornya masih berupa kursor teks. Itu akan membuat elemen pemicu akordion tersebut menjadi tampak sebagai sesuatu yang tidak penting/tidak memiliki sesuatu yang penting (alah!). Kita harus mengubah pointer teksnya menjadi pointer jari telunjuk seperti halnya pointer standar yang selalu muncul pada semua link.

Ada dua cara untuk mengubah pointer teks pada elemen <h2> menjadi pointer telunjuk. Pertama, dengan cara menuliskannya secara langsung pada kode CSS seperti ini:

#sidebar-wrapper h2 {
  cursor:pointer;
}

Atau cukup sisipkan fungsi JQuery .css() di depan selektor yang mengarah kepada elemen h2 seperti ini:

$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Mengenai fungsi .addClass('active'), .removeClass('active') dan .toggleClass('active') itu semua hanya untuk menandai panel akordion yang sedang aktif/terbuka. Katakanlah kita ingin membuat elemen <h2> yang sedang aktif berubah warna menjadi merah, maka dalam kode CSS Anda tinggal menambahkan selektor #sidebar-wrapper h2.active dan memberinya warna merah seperti ini:

#sidebar-wrapper h2.active {color:red;}

Info Template

Free Blogger Template

Bleach

Template author: NBTemplate
Description: Bleach is a free blogger template with 3 columns, sidebar on the right and left and exclusive design for Blogger.
Excellent layout for blogs about animals, anime, kids or love.
Download Bleach for free in BTemplates.
  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 58 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Info
  1. http://www.dte.web.id/2013/12/daftar-salinan-berkas-widget-halaman.html
  2. http://www.dte.web.id/2013/02/hosting-file-dengan-google-code-dan.html
Tutup
Ke atas!