Accordion Sederhana dengan Jquery

membuat jquery accordion sederhana

Menu accordion biasanya digunakan untuk meminimalisir penggunaan tempat di sebuah website. Jika salah satu menu terbuka, menu yang lain akan tertutup. Kali ini saya akan memberi tahu cara bagaimana membuat accordion sederhana dengan mudah menggunakan JQuery dan tanpa plugin.

Cara paling mudah untuk membuat accordion adalah dengan menggunakan JQuery UI, JQuery UI accordion memiliki option yang cukup banyak, tapi untuk accordion yang sederhana itu terlalu banyak. Ukuran JQuery UI accordion sekitar 14KB(belum termasuk file jquery) dan menurut saya itu terlalu besar tapi jika membutuhkan accordion yang advance, JQuery UI accordion layak untuk dicoba.

Untuk membuat JQuery accordion hanya membutuhkan file JQuery saja. Silakan download versi terbaru JQuery di JQuery.com, disini saya menggunakan JQuery versi 1.4.2. Saya juga menggunakan CSS reset yang dari 960 Grid System dapat di download di 960.gs

Include JQuery

Sertakan file JQuery di bagian <head>

<link rel="stylesheet" type="text/css" href="/reset.css">
<link rel="stylesheet" type="text/css" href="/text.css">
<script type="text/javascript" src="/jquery-1.4.2.js"></script>

HTML Markup

Saya menggunakan HTML yang sederhana saja, menu yang akan dijadikan accordion di wrap oleh <div> dengan class accordion.

<div class="accordion">
    <h3 class="accordion-title">Menu 1</h3>
    <div class="accordion-content">
        <ul>
            <li>Link1</li>
            <li>Link2</li>
            <li>Link3</li>
        <ul>
    </div>
    
    <h3 class="accordion-title">Menu 2</h3>
    <div class="accordion-content">
        <p>Content accordion tidak hanya list saja, paragraph pun bisa</p>
    </div>
    
    <h3 class="accordion-title">Menu 3</h3>
    <div class="accordion-content">
        <h3>Title</h3>
        <p>Isi accordion bisa apa saja, terserah anda</p>
    </div>
    
    <h3 class="accordion-title">Menu 4</h3>
    <div class="accordion-content">
        <ol>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
        </ol>
    </div> 
</div>

Content dari accordion dapat berupa apa saja mulai dari paragraph, div, atau gambar pun bisa. Tanpa styling accordion akan terlihat seperti gambar di bawah.

Accordion tanpa Styling CSS

CSS Styling

Untuk CSS saya menggunakan CSS reset dari 960 Grid Sytem agar layout tidak berantakan.

.accordion {
    width:300px;
    margin:50px auto 0; /*properti ini saya gunakan hanya di demo saja agar accordion berada di tengah, properti dapat dihilangkan*/
    border:1px solid #999
}

.accordion-title {
    background-color:#ddd;            
    border-style:solid;
    border-width:1px 1px 2px;
    border-color:#ccc #ccc #999;
    padding:5px;
    cursor:pointer;
    margin:0;
    color:#4d4d4d;
    text-shadow:0 2px 0 #fff
}

.accordion-content {
    padding:10px 5px 5px
}

Stylingtidak terlalu banyak hanya memberi style pada accordion saja, sedangkan isi accordion dapat di styling sesuai keinginan anda. Setelah diberi style, accordion akan terlihat seperti gambar di bawah.

Accordion setelah diberi styling CSS

JQuery Time

Saya asumsikan anda telah mengetahui dasar-dasar JQuery, jika belum dapat anda dapat membaca dokumentasi di website JQuery Docs. Script tidak terlalu sulit dan mudah untuk dipahami.

Script akan berjalan setelah seluruh dokumen di load, kebanyakan script JQuery dipanggil setelah dokumen di load.

$(document).ready(function(){
        /* Kode disimpan disini */
});

Pertama kita akan menyembunyikan seluruh accordion-content kecuali accordion yang pertama

$('.accordion .accordion-title') /* pilih elemen .accordion-title */
    .next('.accordion-content') /* pilih elemen selanjutnya yang memiliki class accordion-content */
    .filter(':not(:first)') /* kecuali accordion-content yang pertama */
    .hide(); /* Sembunyikan elemen yang masuk seleksi */

Lalu memberikan event click pada accordion-title. Jika accordion-title di klik maka kode yang berada di dalamnya akan di eksekusi.

$('.accordion > .accordion-title').click(function(){
        /* Kode ini akan di eksekusi saat accordion-title di klik */
});

Berikut kode yang akan di eksekusi saat accordion-title di klik

$('.accordion > .accordion-title').click(function(){ /* event klik */

    /* kode dibawah ini berfungsi jika user melakukan klik pada
       accordion yang terbuka, maka accordion tidak akan melakukan
       sliding kembali. $(this) disini mengacu pada .accordion-title */
    var selfClick = $(this).next('div:first').is(':visible');
    if(selfClick) {
      return;
    }

    $(this) /* $(this) mengacu pada .accordion-title */

        /* pilih elemen parent dari .accordion-title. Pada DOM
           parent adalah elemen yang membungkus elemen .accordion-title.
           Dalam hal ini parent berarti elemen div dengan class 
           accordion */
        .parent()
    
        /* cari children elemen div yang tidak disembunyikan */
        .find('> div:visible')
    
        /* lakukan slidetoggle, jika elemen tidak terlihat maka akan 
           melakukan slideDown, sebaliknya jika elemen terlihat akan
           melakukan slideUp */
        .slideToggle();

    $(this) /* accordion-title */

        /* pilih elemen yang tepat berada di sebeleh accordion-title
           dalam hal ini berarti elemen div dengan class accordion-content 
        */
        .next('div:first') 
    
        /* Lakukan slidetoggle kembali */
        .slideToggle();
 });

Kode yang telah selesai akan terlihat seperti di bawah ini

$(document).ready(function(){
    $('.accordion .accordion-title')
        .next('.accordion-content')
        .filter(':not(:first)')
        .hide();

    $('.accordion > .accordion-title').click(function(){
        var selfClick = $(this).next('div:first').is(':visible');
        if(selfClick) {
          return;
        }

        $(this) 
            .parent()
            .find('> div:visible')
            .slideToggle();

        $(this)
            .next('div:first') 
            .slideToggle();
     });
});

Akhirnya accordion selesai juga, memang sederhana tapi anda dapat memodifikasi sesuai keinginan anda.