jQuery click / toggle between two functions

Question

I am looking for a way to have two separate operations / functions / "blocks of code" run when something is clicked and then a totally different block when the same thing is clicked again. I put this together. I was wondering if there was a more efficient / elegant way. I know about jQuery .toggle() but it kind of sucks.

Working here: http://jsfiddle.net/reggi/FcvaD/1/

var count = 0; $("#time").click(function() {     count++;     //even odd click detect      var isEven = function(someNumber) {         return (someNumber % 2 === 0) ? true : false;     };     // on odd clicks do this     if (isEven(count) === false) {         $(this).animate({             width: "260px"         }, 1500);     }     // on even clicks do this     else if (isEven(count) === true) {         $(this).animate({             width: "30px"         }, 1500);     } }); 

Answer 1

jQuery has two methods called .toggle(). The other one ^[docs] does exactly what you want for click events.

Note: It seems that at least since jQuery 1.7, this version of .toggle is deprecated, probably for exactly that reason, namely that two versions exist. Using .toggle to change the visibility of elements is just a more common usage. The method was removed in jQuery 1.9.

Below is an example of how one could implement the same functionality as a plugin (but probably exposes the same problems as the built-in version (see the last paragraph in the documentation)).

---

(function($) {     $.fn.clickToggle = function(func1, func2) {         var funcs = [func1, func2];         this.data('toggleclicked', 0);         this.click(function() {             var data = $(this).data();             var tc = data.toggleclicked;             $.proxy(funcs[tc], this)();             data.toggleclicked = (tc + 1) % 2;         });         return this;     }; }(jQuery)); 

DEMO

(Disclaimer: I don't say this is the best implementation! I bet it can be improved in terms of performance)

And then call it with:

$('#test').clickToggle(function() {        $(this).animate({         width: "260px"     }, 1500); }, function() {     $(this).animate({         width: "30px"     }, 1500); }); 

Update 2:

In the meantime, I created a proper plugin for this. It accepts an arbitrary number of functions and can be used for any event. It can be found on GitHub.