Plugin jQuery Accordion Sederhana

Plugin 

/**
 * Simple jQuery Accordion Plugin
 * Author: Taufik Nurrohman
 * Date: 8 June 2012
 * https://plus.google.com/108949996304093815163/about
 */

(function($) {
    $.fn.accordion = function(settings) {
        settings = jQuery.extend({
            active: 1,
            sUpSpeed: 400,
            sDownSpeed: 400,
            sUpEasing: null,
            sDownEasing: null
        }, settings);

        return this.each(function() {
            var $this = $(this),
                $item = $this.children('div[data-header]'),
                activePanel = settings.active - 1;

            $item.each(function() {
                $(this).hide().before('<h2 class="accordion-header">' + $(this).data('header') + '</h2>');
            });

            $this.children('div:eq(' + activePanel + ')').show().prev().addClass('active');
            $this.find('.accordion-header').on("click", function() {
                $this.children('h2').removeClass('active');
                $item.slideUp(settings.sUpSpeed, settings.sUpEasing);
                $(this).addClass('active').next().slideDown(settings.sDownSpeed, settings.sDownEasing);
            });

        });
    };

})(jQuery);

Dasar Penggunaan 

Cara menggunakannya sama dengan plugin jQuery UI Accordion. Hanya saja Saya mencoba menyederhanakan kerangka dan opsinya untuk kebutuhan skala kecil.

Pertama-tama buat kerangka HTML seperti ini:

<div id="accordion">
    <div data-header="Accordion Title 1">Content 1</div>
    <div data-header="Accordion Title 2">Content 2</div>
    <div data-header="Accordion Title 3">Content 3</div>
    <div data-header="Accordion Title 4">Content 4</div>
</div>

Setiap nama header akordion disimpan di dalam atribut data-header. Plugin di atas nantinya akan memindahkan/menyalin nilai atribut tersebut untuk disisipkan ke dalam elemen <h2> yang akan diciptakan secara otomatis.

Berikutnya adalah kode CSS dasar untuk menciptakan dimensi akordion seperlunya. Silakan dimodifikasi sendiri:

#accordion {
  width:300px;
  background-color:green;
  border:2px solid black;
}

#accordion h2.accordion-header {
  cursor:pointer;
  background-color:black;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  padding:10px 15px;
  margin:0px 0px;
}

#accordion h2.active {
  background-color:yellow;
  color:black;
}

#accordion div[data-header] {
  padding:10px;
}

Seleksi elemen induk pada kerangka yang Anda buat lalu terapkan plugin .accordion():

$(function() {
    $('#accordion').accordion();
});

Pengaturan Lanjutan 

Ada lima buah opsi yang Saya buat untuk pengaturan tingkat lanjut:

$(function() {
    $('#accordion').accordion({
        active: 1,
        sUpSpeed: 400,
        sDownSpeed: 400,
        sUpEasing: null,
        sDownEasing: null
    });
});

Lihat Demo