Mimicking jQuery .toggle() with minimum code?

Question

As of jQuery 1.8, the .toggle() utility function is deprecated, and I'm looking across Stack Overflow to no avail for a quickie snippet to mimic its functionality. I looked at a proposed solution here but I find it too verbose.

I wonder if I should toggle a custom class name and do an .on() / .off(), or if I should track a boolean value?

In my mind I'm thinking I should be able to do it all in a single .on() event map...

Has anyone here done it before and can share a snippet?

What I came up with is this: anyone have ideas how to avoid using a global variable to track my click state?

g.toggler = 0;
$(document).on({
    click : function(){
        g.toggler++;
        if(g.toggler%2==1){
            console.log('forth');
        } else {
            console.log('back');
        };
    }
});

I'd consider class names obtrusive and prefer `.data()`. A boolean flag in a scope level above has better performance but may get out of hand if you have too many `.toggle`s. — Fabrício Matté, Jan 23 '13 at 22:16
jQuery has a bunch of other toggle**** functions that can be used for some things, otherwise the usual way would be to use a flag. — adeneo, Jan 23 '13 at 22:16
Few examples of replacements here: https://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead — Kevin B, Jan 23 '13 at 22:16
You find it too verbose? It is merely 1 getter, 1 setter and 1 condition! The only less verbose way is to re-implement the toggle function yourself. http://jsfiddle.net/QyYPm/1/ — Fabrício Matté, Jan 23 '13 at 22:24
Thanks Fabricio. Yes, I'm not a big fan of writing plugins. Sure, you can always build something inside a plugin and then have a clean interface to it from your jQuery code, but I think there has to be a simple way to easily get this functionality going inline... — tim, Jan 23 '13 at 22:58

score 2 · Accepted Answer · answered Jan 23 '13 at 23:02

2

Store your toggle value in the data object of your element.

http://jsfiddle.net/HNxFx/

$(document).on({
    click:function(){
        var toggle = $(this).data("toggler", !$(this).data("toggler")).data("toggler");
        if(toggle){
            console.log('forth');
        } else {
            console.log('back');
        };
    }
});

answered Jan 23 '13 at 23:02

Kevin B

94,570
16
163
180

thanks for the answer. I'm not so skilled in the intricacies of javascript. May I ask what exactly the `!$(this).data("toggler")).data("toggler");` does? I'm always struggling with expressions that have a bang in them. – tim Feb 01 '13 at 19:12
1

Look at it from the inside out. `!$(this).data("toggler")` returns `true` or `false` depending on the current value of `$(this).data("toggler")`. If you then replace that part with it's return value (true for example), it will execute this: `$(this).data("toggler", true)` causing it to be equal to the opposite of what it currently is. Next, at the end, we're doing `.data("toggler")` to get the resulting value. – Kevin B Feb 01 '13 at 19:35

Mimicking jQuery .toggle() with minimum code?

1 Answers1