The proper use of jQuery toggle?

Question

In this stackoverflow answer

$('#user_button').toggle(function () {
    $(".hello").addClass("active");
}, function () {
    $(".hello").removeClass("active");
});

The jQuery .toggle callback function is used to add and remove classes to an element. Now according to the jQuery .toggle documentation, .toggle is originally used to switch between visibility states of the selected element.

I've made a jsfiddle demo: http://jsfiddle.net/taheri/nYdng/

In my example here it seems to only alternate between call back functions, and the visibility of the #user_button itself is not being toggled. What am i missing out in the documentation here? Can toggle be used to only alternate between functions?

Thank you!

Answer 1

To toggle between classes, jQuery's toggleClass() method is used. There are other toggles like slideToggle() also in jQuery which are just shortcuts for animate function.

However, according to the link you've provided, you can't provide two callback functions to toggle() method. You should only provide the duration (optional), easing (also optional), and a callback (again optional), or you can simply provide a Boolean value.

I examined your code, and it seems to work just fine. However, I think this type of usage may not be the best practice. I'm still searching to see what's wrong.

Answer 2

From the jquery documentation link you provided:

Note: The event handling suite also has a method named .toggle(). Which one is fired depends on the set of arguments passed.

Because you are passing in two functions as arguments, the event handling suite's toggle() function is being called instead.

Answer 3

in jQuery (after examining the 1.6.2 source code), .toggle() supports a number of different types of arguments. One thing it supports is passing it two callback functions. If that's what you pass it, it will call the first function the first time you call it, the second time you call it it will call the second function and it will alternate each time. '

When you pass functions to it like this, it does NO other operation except call your functions. If you want something to hide and show, you have to do that in your functions.

You can see it work here: http://jsfiddle.net/jfriend00/QGz5c/.

The jQuery documentation does not make this clear. There should be just one set of documentation for .toggle() that describes all the options you can pass it, but as Šime points out, there are two completely different sets of doc for the different types of parameters you can pass it.

Answer 4

The visibility of #user_button is not being toggled because you're toggling $(".hello"). That is

$('#user_button').toggle(function () {
    $(this).hide();
    $(".hello").addClass("active");
}, function () {
    $(this).show();
    $(".hello").removeClass("active");
});

Would then change the visibility of #user_button.

Answer 5

There are two toggle methods... this one and this one. They should have named them differently to avoid this confusion.