Cara Membuat Plug-in JQuery Accordion Sederhana

Berikut Cara Membuat Plug-in JQuery Accordion Sederhana, kawan tinggal memasang kode dibawah ini kedalam template sobat. bila ada yang belum paham cara peletakan kodenya silahkan baca di Panduan Cara Meletakan Kode pada template berikut kodenya:

#accordion {
width:300px;
margin:50px auto;
background-color:silver;
border:2px solid black;
}
#accordion h2.accordion-header {
cursor:pointer;
background-color:black;
font:bold 12px Arial,Sans-Serif;
color:white;
padding:5px 15px;
margin:0 0;
border-bottom:1px solid #292929;
}
#accordion h2.active {
background-color:orange;
color:black;
}
#accordion div {
height:150px;
padding:10px 15px;
}

/**
 * Simple JQuery Accordion Plugin
 * Author: Elin
 * Date: 2 september 2012
 * http://belajar-jq.blogspot.com/
 */
(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);
// Eksekusi di sini!
$(function() {
    $('#accordion').accordion();
});

<div id="accordion">
<div data-header="Judul 1">Isi 1</div>
<div data-header="Judul 2">Isi 2</div>
<div data-header="Judul 3">Isi 3</div>
<div data-header="Judul 4">Isi 4</div>
<div data-header="Judul 5">Isi 5</div>
</div>

Demikian Cara Membuat Plug-in JQuery Accordion Sederhana, Semoga bermanfaat.

Rating: 5 Reviewer: Unknown