Memahami Konsep JQuery Akordion Sederhana
Tabel Konten
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 mendeklarasikandisplay: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);
.
Elementhis
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:
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 maksudnyaeaseInOutExpo
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
@cah pare Baca: Tip: Membuat Sidebar Akordion dengan JQuery
Unknown
mas kalau effect akordion menampilkan baris yang pertama bagaimana ?
Taufik Nurrohman
@Agust Nurfa Coba pakai kode ini:
Anonim
Mas , Adakah Cara Untuk Membuat Accordion Horizontal Yang Simple dan Efketif...?