My first jQuery plugin: A simple Accordion

I’ve been using jQuery for quite some time now, but never took the time to try and write my own plugin.

Today i did and as an example i wrote a simple accordion plugin.
It’s probably far from perfect and i know there’s one in the jQuery UI library, but maybe you don’t want your clients to download an extra 200k just for an accordion… :-)

Anyways, the plugin has four parameters:
1. speed: for expanding/collapsing the container;
2. index: container to open on default;
3. trigger: the trigger element (defaults to an h2 element);
4. container: the html element used as container (defaults to a div, but can for example also be an ul);

// **************************************************************
// simpleAccordion v1.0.0
//
// simpleAccordion is my first try at writing jQuery plugins
// it provides a means for displaying a so called 'accordion' view
// mostly used in navigation, but can be used otherwise.
//
// Author      : Richard van den Winkel
// Website     : http://www.vandenwinkel.com/jquery/simpleAccordion
// E-mail      : richardvandenwinkel@gmail.com
// Releasedate : May 13 2009
// Version     : 1.0.0
// **************************************************************
 
/*
 
--- An example ---
html:
<div class="accordion">
<h2>trigger</h2>
<ul>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ul>
<h2>trigger</h2>
<ul>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ul>
</div>
function call:
<script type="text/javascript">        
    $(document).ready(function() {
        $('.accordion').simpleAccordion({
            speed: 'fast',
            container: 'ul'
        });
    });
</script>
 
*/
 
;(function($) {
    $.fn.simpleAccordion = function(o) {
 
        // default settings
        var o = $.extend({
            trigger: 'h2',
            container: 'div',
            speed: 'slow',
            index: 0
        }, o);
 
        return this.each(function() {
            // this =&gt; the accordion container
            var $this = this;
 
            // Variable for the current open item
            $this.curThis = "";
 
            // Set trigger cursor to pointer
            $(this).find(o.trigger).css('cursor', 'pointer');
 
            // Default close all item containers
            $(this).find(o.trigger).next(o.container).hide();
 
            // Add click logic to all triggers
            $(this).find(o.trigger).click(function() {
                if ($this.curThis != "") {
                    $($this.curThis).next(o.container).toggle(o.speed);
                }
 
                var newThis = this;
                if ($this.curThis == newThis) {
                    $this.curThis = "";
                }
                else {
                    $this.curThis = newThis;
                    $(newThis).next(o.container).toggle(o.speed);
                }
            });
 
            // try to open the container with the corresponding index (if there are any...)
            if ($(this).find(o.trigger).length &gt; 0) {
                if (o.index &lt; $(this).find(o.trigger).length) {
                    $(this).find(o.trigger + ':eq(' + o.index + ')').click();
                }
                else {
                    $(this).find(o.trigger + ':first').click();
                }
            }
        });
    };
})(jQuery);

You can view an example here: http://www.vandenwinkel.com/jquery/simpleAccordion/

comments

No comments yet.

Sorry, the comment form is closed at this time.