I wrote an accordion plugin as well... I also wanted something that was structurally flexible.

I recently re-factored what i had, so this is not that well tested or optimized. Here it is anyway:

/**
 * Utility function to swap className on a jQuery object.
 *
 * @example $('p.foo').swapClass('foo', 'bar');
 *
 * @param {Object} c1 class name one.
 * @param {Object} c2 class name two.
 */
jQuery.fn.swapClass = function(c1, c2){
    return this.each (function(){
        var t = jQuery(this);
        (!t.is('.'+c1)) ?
            t.addClass(c1).removeClass(c2) : t.addClass(c2).removeClass(c1);
    });
}

/**
 * jQuery plugin to add an accordian effect to any jQuery obj
 * and selectable content within the same parent.
 * requires a swapClass Plugin
 *
 * @param {_expression_}     content:    Required. Element to be paired with. Takes a jquery _expression_/object/dom element.
 * @param {Object} options: Optional option object.
 *     {Integer}         startIndex:    Index of the initial pair to be shown.
 *     {String|Integer} speed:    When given a speed the accordian animates in and out.
 *     {Function}       callBack:    CallBack function at the end of each toggle.
 */
jQuery.fn.accordian = function(content, options) {
    if (!this[0]) return;
    var options = jQuery.extend({
        startIndex: 0,
        speed: 0,
        collapsible: false,
        callBack: null
    }, options || {});
    var $parent = this.parent().addClass('accordian'),
        $content = jQuery(content, $parent).hide(),
        $self = this.end();   
    if(options.startIndex >= 0) jQuery($content[options.startIndex]).show();   
    return this.each(function(i){
        jQuery(this).click(function(){
            if (!jQuery(this).is('.open') && !options.collapsible){
                $self.filter('.open').swapClass('open', 'close').end();
                jQuery(this).swapClass('open', 'close');
                var $closeObj = jQuery($content).filter(':visible'),
                    $openObj = jQuery($content).eq(i);
                //$content.end();               
                if (options.speed) {
                    $closeObj.animate({'height': 'hide'}, options.speed, function(){
                        $openObj.animate({'height': 'show'}, options.speed, options.callBack);
                    });
                } else {
                    $closeObj.hide(options.speed);
                    $openObj.show(options.speed, options.callBack);
                }
            }
        });
    });
}
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to