The proper use of jQuery toggle?

Question

$('#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?

There are two `toggle` methods... [this one](http://api.jquery.com/toggle/) and [this one](http://api.jquery.com/toggle-event/). They should have named them differently to avoid this confusion. — Šime Vidas, Sep 17 '11 at 14:01

score 4 · Accepted Answer · answered Sep 17 '11 at 14:16

4

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

answered Sep 17 '11 at 14:16

Šime Vidas

182,163
62
281
385

+1 that was helpful. Note that I realized that this toggle will not work in an onclick attribute of the element you wish to toggle. This toggle function will preventDefault thus not execute the onclick attribute! – Guillaume Bois Mar 14 '12 at 18:57

score 1 · Answer 2 · edited Sep 17 '11 at 14:02

1

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.

edited Sep 17 '11 at 14:02

Bojangles

99,427
50
170
208

answered Sep 17 '11 at 13:55

Maciej

2,175
1
18
29

jfriend00 · Answer 3 · 2011-09-17T14:23:43.920

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.

NebulaFox · Answer 4 · 2011-09-17T14:07:01.337

-1

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.

edited Sep 17 '11 at 14:07

answered Sep 17 '11 at 13:56

NebulaFox

7,813
9
47
65

score -1 · Answer 5 · answered Sep 17 '11 at 14:03

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.

The proper use of jQuery toggle?

5 Answers5

Linked