Search code examples
jqueryhtmljquery-ui-accordionreusability

How to write a reusable jquery click function?


I have this accordion function :

 $('.accordion a').click(function () {

        if($(this).is('.accordionClose')) {
            $('.accordionOpen').toggleClass('accordionOpen').toggleClass('accordionClose').next().slideToggle().toggleClass('openContent');
            $(this).toggleClass('accordionOpen').toggleClass('accordionClose');
            $(this).next().slideToggle().toggleClass('openContent');
        }

        else {
            $(this).toggleClass('accordionOpen').toggleClass('accordionClose');
            $(this).next().slideToggle().toggleClass('openContent');
        }
    });

I have this snippet to make a accordion effect. Problem is I am not aware how to make this a common function and call it whenever required. Do I need to make it in a plugin format ? Or any other possible way of doing it?

I am aware of using multiple selctors separated by comma. I do not mean that.


Solution

  • Write like this:

    function func_name(){
    //do stuff here
    }
    
    //call this later like this:
    
    $('.accordion a').click(func_name);
    
    //Or call like this:
    $('.accordion a').click(function(){
      func_name(); //parenthesis required here
    });
    

    Also, you may look at another post for stepping up a little more.