A simple accordion with jQuery

Related to: http://blog.seankoole.com/simple-accordion-with-jquery

HTML

<div class="accordion">
    <h3>Accordion nr 1</h3>
    <div>
        Accordion text nr 1
    </div>
    <h3>Accordion nr 2</h3>
    <div>
        Accordion text nr 2
    </div>
    <h3>Accordion nr 3</h3>
    <div>
        Accordion text nr 3
    </div>
</div>

JavaScript

jQuery.fn.simpleAccordion    = function (options)
{
    // Use default options, if options aren't defined
    options        = $.extend ({start: 0, activeClass: 'active'}, options || {});
    
    return this.each (
        function ()
        {
            var $this    = $(this);
            var headers    = $this.children ('h3'); // collect all h3's, using children instead of find!
            
            // Make sure all divs are hidden 'cept the starter
            headers.next ().hide ();
            headers.eq (options.start).addClass (options.activeClass).next ().show ();
            
            // Bind a handler to the h3 tags to handle the sliding up and down
            headers.bind ('click',
                function ()
                {
                    var $this    = $(this);
                    
                    $this.addClass (options.activeClass) // Add the activeClass to the header
                    .next ().slideDown (); // Traverse to the DIV next to it, and slide it down
                    
                    $this.siblings ('.' + options.activeClass) // Traverse to the previously active header
                    .removeClass (options.activeClass) // Remove the activeClass, it's not longer active
                    .next ().slideUp (); // Traverse to the DIV next to it, and slide it up
                }
            );
        }
    );
}
    
/* Run it */
$('div.accordion').simpleAccordion ();