jquery toggle triggers display to none

Question

I have some weird behavior. I want to trigger event on click on a span tag, let's say #span id. When I run this in my console, to test :

$('#span').toggle(function(){
    console.log('hi');
},function(){
      console.log('hey');
});

The #span display is set to none. I tried to find some code which could interfere but I didn't find any...

You can check this answer http://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone — lefoy, Sep 24 '13 at 16:38

score 2 · Answer 1 · edited May 23 '17 at 12:11

This version of toggle was removed in jQuery 1.9, so if you are using jQuery >= 1.9 it will toggle the display state

One possible solution to enable the removed functionalities is to add the migration plugin after jQuery

Another will be is to write a toggleClick plugin yourself like the below one from this answer

$.fn.toggleClick = function(){
    var methods = arguments, // store the passed arguments for future reference
        count = methods.length; // cache the number of methods 

    //use return this to maintain jQuery chainability
    return this.each(function(i, item){
        // for each element you bind to
        var index = 0; // create a local counter for that element
        $(item).click(function(){ // bind a click handler to that element
            return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element
            // the index % count means that we constrain our iterator between 0 and (count-1)
        });
    });
};

then

$('#span').toggleClick(function(){
    console.log('hi');
},function(){
      console.log('hey');
});

score 2 · Answer 2 · edited Sep 24 '13 at 16:43

2

Jquery doesn't support toggle(func,func) anymore, toggle() simply toggles the element visible or invisible.

edited Sep 24 '13 at 16:43

Tushar Gupta - curioustushar

58,085
24
103
107

answered Sep 24 '13 at 16:35

MichaC

13,104
2
44
56

score 0 · Answer 3 · answered Sep 24 '13 at 16:36

http://api.jquery.com/category/deprecated/

.toggle() method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

http://api.jquery.com/toggle-event/

you can use .one()

DEMO

function handler1() {
    console.log('hi');
    $(this).one("click", handler2);
}

function handler2() {
    console.log('hey');
    $(this).one("click", handler1);
}
$("#span").one("click", handler1);

score 0 · Answer 4 · answered Sep 24 '13 at 16:37

0

It has been deprecated and then removed in jQuery 1.9. You'll find some docs here

answered Sep 24 '13 at 16:37

epsilones

11,279
21
61
85

score -1 · Answer 5 · answered Sep 24 '13 at 16:40

There is no more toggle (in that fashion) in jquery 1.9.

What you can do is this and make your own toggle-like plugin:

$.fn.toggleFn = function(){
    var fns = arguments;
    var fns_length = fns.length;
    var idx = 0;
    this.on('click', function(){
        fns[idx % fns_length].apply(this, arguments);
        idx++;
    });
}

Using it:

$('#span').toggleFn(function(){
    console.log('hi');
},function(){
      console.log('hey');
});

jquery toggle triggers display to none

5 Answers5