Membuat Accordion Menu dengan JQuery

Menu Accordion digunakan untuk menimalisir ruang dari sebuah halaman website. Cara kerja menu accordion sangat simpel dan hanya membutuhkan tempat yang sedikit dari ruang website, karna menu-menu ditempatkan dalam sebuah menu utama, dimana jika sebuah menu terbuka menu yang lain akan tertutup. 

Di catatan kali ini saya akan memberikan cara membuat menu accordion dengan Jquey yang sederhana.

Untuk membuat Menu Accordion kita membutuhkan file JQuery yang mana dapat didownload secara gratis diJQuery.com . Setelah file JQuery saudara download tempatkan dalam sebuah folder dimana didalam folder ini kita juga akan menyimpan file css dan html, selanjutnya untuk membuat menu accordionnya ikuti langkah berikut :

Langkah petama membuat file css :

1. Buka editor saudara, disini saya menggunakan editor PSPad untuk membuat file css. 
2. Kemudian buat file css di bawah ini :

.accordion {       width: 250px;       border: 1px dotted #222;       } .accordion-menu {       background-color: #666;       border-style: solid;       border-width: 1px 1px 2px;       border-color: #ccc #ccc #666;       padding: 3px;       cursor: pointer;       color: #333;       text-shadow: 0 1px 0 #fff;       margin: 0;       } .accordion-isi {       padding: 8px 4px 4px;       }

3. Simpan file css diatas didalam folder yang telah kita buat sebelumnya dengan nama file accordion.css.

Langkah Kedua, implementasikan kode Jquery :

1. Implementasi kode jQurey seperti tabel berikut :

$(document).ready(function() {     $('.accordion .accordion-menu')         .next('.accordion-isi')         .filter(':not(:first)')         .hide();         $('.accordion > .accordion-menu').click(function(){                 var selfClick = $(this).next('div:frst').is(':visible');         if(selfClick) {             return;         }            $(this)               .parent()               .find('> div:visible')               .slideToggle();            $(this)               .next('div:first')               .sildeToggle();       }); });

2. implementasi kode Jquery diatas akan ditempatkan dalam markup html dimana fungsinya yang akan mengatur animasi accordion menu. 

Langkah Ketiga membuat markup HTML :

1. Panggil file JQuery dan file CSS yang telah dibuat, tempatkan diantara tag < head> 

< link rel="stylesheet" type="text/css" href="accordion.css> < script type="text/javascript" src="jqurey-1.5.1.js> < /script>

2. Kemudian buat tag htmlnya seperti tabel berikut :

< div class="accordion">     < h3 class="accordion-menu">Menu Pertama< /h3>     < div class="accordion-isi">         < ul>            < li>Link1< /li>            < li>Link2< /li>         < ul>     < /div>          < h3 class="accordion-menu">Menu Kedua< /h3>     < div class="accordion-isi">         < p>Content accordion tidak hanya list saja, paragraph pun bisa< /p>     < /div>          < h3 class="accordion-menu">Menu Ketiga< /h3>     < div class="accordion-isi">         < h3>Title< /h3>         < p>Isi accordion bisa apa saja, terserah anda< /p>     < /div>          < h3 class="accordion-menu">Menu Keempat< /h3>     < div class="accordion-isi">         < ol>             < li>Link 1< /li>             < li>Link 2< /li>             < li>Link 3< /li>         < /ol>     < /div>   < /div>

Ket : didalam tag < > tidak ada spasi.

3. Sehigga keseluruhan dari kode dalam htmlnya sebagai berikut :

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < html>   < head>   < title>Accordion Menu< /title>   < link rel="stylesheet" type="text/css" href="accordion.css" mce_href="accordion.css">   < script type="text/javascript" src="/jquery-1.5.1.js" mce_src="/jquery-1.5.1.js">< /script>   < script type="text/javascript">     $(document).ready(function(){         $('.accordion .accordion-menu')             .next('.accordion-isi')             .filter(':not(:first)')             .hide();         $('.accordion > .accordion-menu').click(function(){             var selfClick = $(this).next('div:first').is(':visible');             if(selfClick) {               return;             }             $(this)                 .parent()                 .find('> div:visible')                 .slideToggle();             $(this)                 .next('div:first')                 .slideToggle();          });     });     < /script> < /head> < body>   < div class="accordion">     < h3 class="accordion-menu">Menu Pertama< /h3>     < div class="accordion-isi">         < ul>            < li>Link1< /li>            < li>Link2< /li>         < ul>     < /div>          < h3 class="accordion-menu">Menu Kedua< /h3>     < div class="accordion-isi">         < p>Content accordion tidak hanya list saja, paragraph pun bisa< /p>     < /div>          < h3 class="accordion-menu">Menu Ketiga< /h3>     < div class="accordion-isi">         < h3>Title< /h3>         < p>Isi accordion bisa apa saja, terserah anda< /p>     < /div>          < h3 class="accordion-menu">Menu Keempat< /h3>     < div class="accordion-isi">         < ol>             < li>Link 1< /li>             < li>Link 2< /li>             < li>Link 3< /li>         < /ol>     < /div>   < /div> < /body> < /html>

Ket : didalam tag < > tidak ada spasi..disini saya kasih spasi karna saya tidak memakai syntakhl.

4. Selesai sudah Accordion Menu yang kita buat, file yang sudah jadi silahkan download pada menu download pada web ini dengan nama file Accordion Menu Dengan JQuery, semoga bermanfaat dan bisa dikembangkan lagi...Terima kasih...( *_^ )