jquery multi level accordion

Question

I've got simple multi level accordion plugin. It's almost perfect for me.

(function(jQuery){
     jQuery.fn.extend({  
         accordion: function() {       
            return this.each(function() {

                var $ul = $(this);

                if($ul.data('accordiated'))
                    return false;

                $.each($ul.find('ul, li>div'), function(){
                    $(this).data('accordiated', true);
                    $(this).hide();
                });

                $.each($ul.find('a'), function(){
                    $(this).click(function(e){
                        activate(this);
                        return void(0);
                    });
                });

                var active = $('.active');

                if(active){
                    activate(active, 'toggle');
                    $(active).parents().show();
                }

                function activate(el,effect){
                    $(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
                    $(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
                }

            });
        } 
    }); 
})(jQuery);

Full code - http://jsfiddle.net/SKfax/

I'm trying to slightly remake this code, but without any success. I need to toggleClass('.active') and removeClass('.active') only inside 'a' elements and not their parent 'li'

P.S.: '.active' class applies only to the headings of currently opened sections.

Lallygag

You absolutely can omit the return void 0; - that's what all functions do :-) – Robles

unfortunately, it's not the answer :( – Lallygag

That's why I commented on it instead of posting an answer :-) However, I didn't really understand your question. The fiddle doesn't work for me, and I don't see what you have tried to toggle the active classes on the links instead of the list items. Why would you need that at all? – Robles

Answer 1

This was a proper logical conundrum, but I think I have got it working (let me know if I have misunderstood):

JSFiddle

I think the key was to prevent the first chain in the activate function from running on the first pass. So when you call activate here:

var active = $('.active');

if(active){
    activate(active, 'toggle');
    $(active).parents().show();
}

...you don't want to execute the chain that slides up siblings and toggles the active class.

I have also tweaked the activate function as described below:

function activate(el,effect){

    //only do this if no effect is specified (i.e. don't do this on the first pass)
    if (!effect) {
        $(el)
             .toggleClass('active') //first toggle the class of the clicked element (i.e. the 'a' tag)
             .parent('li') //now we go up the DOM to the parent 'li'
             .siblings() //get the sibling li's
             .find('a') //get the 'a' tags below them (assuming there are no 'a' tags in the content text!)
             .removeClass('active') //remove active class from these 'a' tags
             .parent('li')
             .children('ul, div')
             .slideUp('fast'); //and hide the sibling content
    }

    //I haven't touched this
    $(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}

Andaman