Simple JQuery Accordion Plugin by Taufik Nurrohman

by Taufik Nurrohman

HTML

<div id="accordion">
    <div data-header="Lorem Ipsum">Content 1</div>
    <div data-header="Dolor Sit Amet">Content 2</div>
    <div data-header="Consectetuer">Content 3</div>
    <div data-header="Adipiscing Elit">Content 4</div>
    <div data-header="Sed Diam Nonummy">Content 5</div>
</div>

CSS

html {overflow-y:scroll;}

body {
  background-color:whitesmoke;
}

#accordion {
  width:300px;
  margin:50px auto;
  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:0 0;
}
#accordion h2.active {
  background-color:yellow;
  color:black;
}
#accordion div {
  height:150px;
  padding:10px;
}

JavaScript

/**
 * 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);

// Eksekusi di sini!
$(function() {
    $('#accordion').accordion();
});