Toggle adds display none?

Question

I am trying to make a box but when clicked a list item it drops down then returns when clicked. I have done this many times before but for some reason Jquery is adding display:none;

        $('li.item-162').toggle(function(){
                           $('.login').animate({
                                top: '27px'
                                 }, 1000);

                        },function() {          
                             $('.login').animate({
                                top: '-212px'
                                 }, 1000);
                        });

        $(".li.item-162").show();

And in firebug my code shows You can see it live here.. http://rdhealthandsafety.co.uk/index.php

Any ideas why this is happening, I guess its my Tuesday morning blues :(

Answer 1

The way you intend to use the .toggle() function is deprecated since jQuery 1.8 and has been removed in jQuery 1.9.

Category: Deprecated 1.8:

.toggle() Bind two or more handlers to the matched elements, to be executed on alternate clicks.

This is reasoned in Changes of Note in jQuery 1.9:

This is the "click an element to run the specified functions" signature of .toggle(). It should not be confused with the "change the visibility of an element" of .toggle() which is not deprecated. The former is being removed to reduce confusion and improve the potential for modularity in the library. The jQuery Migrate plugin can be used to restore the functionality.

Nevertheless Gaby aka G. Petrioli created a function that does the same as an answer to What to use instead of toggle(…) in jQuery > 1.8?:

$.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)
        });
    });
};

You can simply use it like this:

$('selector').toggleClick(function1, function2, […]);