Memahami Konsep JQuery Akordion Sederhana

Tabel Konten
  1. Langkah Pertama: Buat Elemen dan Desain Tampilan 
  2. Langkah ke Dua: Pemanggilan JQuery 
  3. Langkah ke Tiga: Deklarasikan Cara Kerja 
  4. Pemahaman Lebih Lanjut 

Sistem akordion pada JQuery sebenarnya hanyalah konsep penggabungan beberapa slide panel sederhana, yaitu berupa baris-baris tombol panel dan panel-panel itu sendiri dengan jumlah lebih dari satu. Hanya bedanya, di sini kita bermain dengan peraturan bahwa: Saat sebuah panel terbuka, maka panel lain akan tertutup. Tidak boleh sampai terjadi pembukaan panel lebih dari satu.
Peraturan ini tentunya akan memakasa kita untuk menciptakan sebuah sistem yang dapat membuka sebuah panel, dan dalam waktu yang bersamaan juga dapat menutup panel lainnya yang masih terbuka:

jquery akordion accordion

Langkah Pertama: Buat Elemen dan Desain Tampilan 

Di sini Saya membuat kerangka akordion dari elemen <h2> dan <div class='panel-akordion'> yang Saya letakkan di dalam wilayah kekuasaan <div id='akordion'> ... </div> seperti ini:
<div id='akordion'>

     <h2>Tombol Akordion</h2>
     <div class='panel-akordion'>
          KONTEN DI SINI
     </div>

     <h2>Tombol Akordion</h2>
     <div class='panel-akordion'>
          KONTEN DI SINI
     </div>

     <h2>Tombol Akordion</h2>
     <div class='panel-akordion'>
          KONTEN DI SINI
     </div>

     <h2>Tombol Akordion</h2>
     <div class='panel-akordion'>
          KONTEN DI SINI
     </div>

     <h2>Tombol Akordion</h2>
     <div class='panel-akordion'>
          KONTEN DI SINI
     </div>

</div>

Kemudian Saya deklarasikan konsep-konsep tampilan sederhana pada kerangka akordion di atas seperti pemberian warna hijau pada latar belakang, warna putih pada teks dan sebagainya:

#akordion {
  padding:0;
}

#akordion h2 {
  cursor:pointer;
  margin:0;
  padding:10px 20px;
  background:#344317;
  color:#fff;
  font:bold 10px Georgia,Serif;
  text-transform:uppercase;
}

.panel-akordion {
  background:#88AE27;
  color:#fff;
  padding:10px;
}

Langkah ke Dua: Pemanggilan JQuery 

Kamu bisa memakai versi JQuery apa saja, namun Saya sarankan untuk menggunakan JQuery minimal versi 1.3.2 seperti ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

Langkah ke Tiga: Deklarasikan Cara Kerja 

Buat sebuah sistem seperti peraturan yang telah Saya katakan di atas:
<script type='text/javascript'>
$(document).ready(function() {
     $('.panel-akordion').hide();
     $('#akordion h2').click(function() {
          $('.panel-akordion').slideUp(500);
          $(this).next().slideDown(500);
     });
});
</script>

Susun semua kode tersebut pada templatemu lalu simpan. Jika kamu sudah terbiasa membedakan kode CSS, JavaScript dan Elemen pasti tahu tempat-tempat yang umum untuk meletakkan kode-kode tersebut.

Pemahaman Lebih Lanjut 

Seperti halnya saat membuat slide panel, di sini akan selalu ada dua faktor penting, yaitu menentukan elemen pemicu dan elemen terpicu/elemen yang akan bereaksi. Elemen pemicu Saya buat dari kode <h2>Tombol Akordion</h2>, sedangkan elemen terpicu (elemen yang akan bereaksi setelah sebuah elemen dikenai perintah) Saya buat dari kode <div class='panel-akordion'>KONTEN DI SINI</div>

Sekarang fokuslah pada kode ini:
$(document).ready(function() {
          $('.panel-akordion').hide();
     $('#akordion h2').click(function() {
          $('.panel-akordion').slideUp(500);
          $(this).next().slideDown(500);
     });
});
  • Kode $('.panel-akordion').hide(); maksudnya adalah semua elemen <div class='panel-akordion'>KONTEN DI SINI</div> akan disembunyikan. Perintah ini sangat umum dinyatakan saat kita membangun fungsi dengan JQuery. Selain menggunakan perintah .hide(), menyembunyikan elemen juga dapat dilakukan dengan mendeklarasikan display:none; dalam kode CSS seperti ini:
    Metode Penghilangan Elemen dengan JQueryMetode Penghilangan Elemen dengan CSS
    $('.panel-akordion').hide();.panel-akordion { display:none; }
  • Kode $('#akordion h2') maksudnya adalah JQuery akan menyeleksi elemen <h2> yang berada di dalam wilayah kekuasaan <div id='akordion'> ... </div>. Elemen inilah yang Saya maksud sebagai elemen pemicu.
    Di depan kode tersebut terdapat perintah .click() yang maksudnya bahwa #akordion h2 akan membuat "sesuatu" menjadi bereaksi setelah #akordion h2 diklik ("sesuatu" yang dimaksud di sini adalah .panel-akordion).
  • $('.panel-akordion').slideUp(500); maksudnya bahwa setelah #akordion h2 diklik, maka .panel-akordion yang sedang terbuka akan menutup ke atas (.slideUp) dengan kecepatan 500 milidetik (500). Dan dalam waktu yang bersamaan juga akan membuka panel berikutnya yang masih tertutup. Perintah ini dinyatakan dalam kode $(this).next().slideDown(500);.
    Elemen this yang dimaksud di sini adalah #akordion h2.

15 Komentar

  • Bayu Handono

    udah berhasil, cman easing pada panelnya gmana caranya ??

  • Taufik Nurrohman

    @Profil: Simpel mas. Begini:

    $(document).ready(function() {
    $('.panel-akordion').hide();
    $('#akordion h2').click(function() {
    $('.panel-akordion').slideUp(500, "easeInOutExpo");
    $(this).next().slideDown(500, "easeOutBack");
    });
    });

    Tapi script easing harus dipasang dulu supaya bekerja. Coba pelajari tentang easing JQuery.
    Oya, sudah ada posting sejenis tentang JQuery accordion: http://hompimpaalaihumgambreng.blogspot.com/2012/02/tip-membuat-sidebar-akordion-pada-blog.html
    Mungkin berminat hehe.. :)

  • Anonim

    tetep mas ora iso :p script easing nya udah di copy trus easeIn OuExpo udah di tambahin tpi tetep aja :(
    haha jadi ngerepotin :D

  • orange.net

    mas mau tanya,,
    ini penulisan script untuk di blog ya?
    saya sedang belajar membuat website melalui dreamweaver,,
    kalau penulisan di dreamweaver gimana mas?
    apakah sama?
    terimakasih,, :)

  • Taufik Nurrohman

    @sahadenaApanya ya? Mungkin ada di penulisannya: easeIn OuExpo mungkin maksudnya easeInOutExpo

    Huruf besar dan kecil juga harus diperhatikan karena JavaScript itu sensitif terhadap huruf.

  • Taufik Nurrohman

    @orange.netAduh, Saya bukan desainer hehe... Tapi setahu Saya ada semacam tombol kecil di panel bawah, kira-kira simbolnya berbentuk «» (mirip). Itu untuk menulis kode secara manual. Selebihnya Saya kurang paham. Biasa pake software kelewat canggih sih: Notepad++ :P

  • orange.net

    @Taufik Nurrohman
    sudah berhasil mas,,
    ternyata hanya berbeda tanda baca ' diganti ",,
    hehe,,
    cb pake easing juga berhasil cm pas efek easing'a melebihi batas table'a mas,,
    kira2 tau ga cara seting'a agar batas efek easing'a itu sebatas kotak table?
    terimakasih,, jadi nanya lagi saya,, :)

  • Taufik Nurrohman

    @orange.netTabel apa ya? Kurang jelas Saya. Mungkin maksudnya dibuat tinggi yang sama pada setiap panel.

  • Anonim

    mas boleh saya repost?? :D

  • Taufik Nurrohman

    @sahadena YEP!

  • Unknown

    Mas...bagaimana memasukkan Fungsi2 widget pada panel akordion ...seperti Search,Translate,Labels,Facebook Page,Follow by Email,Popular posts...?

    Mohon petunjuknya mas...

  • Taufik Nurrohman

  • Unknown

    mas kalau effect akordion menampilkan baris yang pertama bagaimana ?

  • Taufik Nurrohman

    @Agust Nurfa Coba pakai kode ini:

    $(document).ready(function() {
    $('.panel-akordion').hide();
    $('.panel-akordion:first').show();
    $('#akordion h2').click(function() {
    $('.panel-akordion').slideUp(500);
    $(this).next().slideDown(500);
    });
    });
  • Anonim

    Mas , Adakah Cara Untuk Membuat Accordion Horizontal Yang Simple dan Efketif...?

Komentar telah ditutup.