CODEWITHSUNDEEP
javascriptjqueryhtmltoggle
user1611830
user1611830

Reputation: 4867

jquery toggle triggers display to none

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...

Upvotes: 2

Views: 203

Answers (5)

MichaC
MichaC

Reputation: 13390

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

Upvotes: 2

Naftali
Naftali

Reputation: 146310

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');
});

Upvotes: -1

epsilones
epsilones

Reputation: 11609

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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');
});

Upvotes: 2

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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);

Upvotes: 0

Related Questions