Peraturan ini tentunya akan memakasa kita untuk membuat sebuah sistem yang sanggup membuka sebuah panel, dan dalam waktu yang bersamaan juga sanggup 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> ibarat 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 ibarat dukungan 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 sanggup menggunakan versi JQuery apa saja, namun Saya sarankan untuk menggunakan JQuery minimal versi 1.3.2 ibarat 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 ibarat 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 instruksi tersebut pada templatemu kemudian simpan. Jika kau sudah terbiasa membedakan instruksi CSS, JavaScript dan Elemen niscaya tahu tempat-tempat yang umum untuk meletakkan kode-kode tersebut.
Pemahaman Lebih Lanjut
Seperti halnya ketika membuat slide panel, di sini akan selalu ada dua faktor penting, yaitu memilih elemen pemicu dan elemen terpicu/elemen yang akan bereaksi. Elemen pemicu Saya buat dari instruksi<h2>Tombol Akordion</h2>, sedangkan elemen terpicu (elemen yang akan bereaksi sehabis sebuah elemen dikenai perintah) Saya buat dari instruksi <div class='panel-akordion'>KONTEN DI SINI</div>Sekarang fokuslah pada instruksi ini:
$(document).ready(function() { $('.panel-akordion').hide(); $('#akordion h2').click(function() { $('.panel-akordion').slideUp(500); $(this).next().slideDown(500); }); });- Kode
$('.panel-akordion').hide();maksudnya yaitu semua elemen<div class='panel-akordion'>KONTEN DI SINI</div>akan disembunyikan. Perintah ini sangat umum dinyatakan ketika kita membangun fungsi dengan JQuery. Selain menggunakan perintah.hide(), menyembunyikan elemen juga sanggup dilakukan dengan mendeklarasikandisplay:none;dalam instruksi CSS ibarat ini:
Metode Penghilangan Elemen dengan JQuery Metode Penghilangan Elemen dengan CSS $('.panel-akordion').hide();.panel-akordion {
display:none;
}
- Kode
$('#akordion h2')maksudnya yaitu 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 instruksi tersebut terdapat perintah.click()yang maksudnya bahwa#akordion h2akan membuat "sesuatu" menjadi bereaksi sehabis#akordion h2diklik ("sesuatu" yang dimaksud di sini yaitu.panel-akordion). $('.panel-akordion').slideUp(500);maksudnya bahwa sehabis#akordion h2diklik, maka.panel-akordionyang 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 instruksi$(this).next().slideDown(500);.
Elementhisyang dimaksud di sini yaitu#akordion h2.