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:

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 JQuery	Metode 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.

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

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