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

Memahami Konsep JQuery Akordion Sederhana

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.
  

Berlangganan

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

 15 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!