How to write a reusable jquery click function?

Question

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.

what do you exactly want?

Sudharsan S
– Sudharsan S

2014-04-01 10:40:24 +00:00
Commented Apr 1, 2014 at 10:40 — Sudharsan S
– Sudharsan S, Commented Apr 1, 2014 at 10:40

Bhojendra Rauniyar · Accepted Answer · 2018-12-09 19:49:45Z

14

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.

edited Dec 9, 2018 at 19:49

answered Apr 1, 2014 at 10:40

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

D4V1D Over a year ago

Isn't $('.accordion a').on('click', func_name); much better?

Bhojendra Rauniyar Over a year ago

@Steve yeah! that's better but I've used click as if the OP has used that and that's not the problem.

Aameer · Accepted Answer · 2014-04-01 10:48:20Z

1

If you want to do exactly the same thing on some other click then You can also trigger the same click event by trigger like :

$(".xyz_class").click(function(){
   $(".accordion a").trigger("click");
});

Docs are here. Hope that helps.

answered Apr 1, 2014 at 10:48

Aameer

1,3761 gold badge11 silver badges30 bronze badges

2 Comments

Vignesh Over a year ago

I meant I want the function to be reusable. Not using the whole snippet in all the places. Hope you got my question right now.

Aameer Over a year ago

The whole point of using functions is to reuse the code.Can you please elaborate on your statement "function to be reusable".As we know all the functions are reusable you can call them any number of times and reuse the code.If you could explain what your objective is?.we could get a better understanding of your problem and will try to help.

Collectives™ on Stack Overflow

How to write a reusable jquery click function?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related