Plugin jQuery Accordion Sederhana

Tabel Konten
  1. Plugin 
  • Dasar Penggunaan 
  • Pengaturan Lanjutan 
  • Simple jQuery Accordion Plugin

    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
        });
    });
    OpsiKeterangan
    activeDigunakan untuk menentukan panel yang akan terbuka saat pertama kali. Nilai 1 memiliki arti bahwa panel pertama akan terbuka
    sUpSpeedDigunakan untuk menentukan kecepatan penutupan panel
    sUpSpeedDigunakan untuk menentukan kecepatan pembukaan panel
    sUpEasingDigunakan untuk menentukan tipe easing panel saat panel menutup (misal: "easeOutBounce")
    sDownEasingDigunakan untuk menentukan tipe easing panel saat panel membuka.

    Lihat Demo

    3 Komentar

    • Beben Koben

      biar cepet di compress ajah jquerynya ya :D

    • Unknown

      mas mau nanya nih :D 1. beda artikel ini dengan artikel "Tambahkan State Aktif untuk JQuery Accordion"... 2. kalau yang aktif diklik lagi lalu tertutup juga gimana?. makasih

      • Taufik Nurrohman

        Bedanya, kalau yang ini sudah dikonversi menjadi plugin, sehingga penerapannya lebih fleksibel. Markup juga sudah Saya sederhanakan.
        Untuk membuat efek aktif yang bisa tertutup kembali, kuncinya ada pada pengecekan kondisi:

        if ($(this).next().is(':hidden')) {
        $(this).addClass('active').next().slideDown();
        } else {
        $(this).removeClass('active').next().slideUp();
        }

        Cara kerjanya: jika saat dicek ternyata panel di bawahnya sedang tertutup, maka tombol akordion akan berfungsi sebagai pembuka. Jika sebaliknya, maka tombol akordion akan berfungsi sebagai penutup ⇒ DEMO

    Komentar telah ditutup.