Snippets → jQuery

<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>

#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;
}

$(function() {
    $('#accordion').accordion({
        active: 1, // Which panel that will open at the first time
        sUpSpeed: 400, // Speed of the panel when closed
        sDownSpeed: 400, // Speed of the panel when opened
        sUpEasing: null, // Easing of the panel when closed (example: "easeInOutExpo")
        sDownEasing: null // Easing of the panel when opened
    });
});

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

Source: http://jsfiddle.net/tovic/EDQn9/...