Best alternative for jQuery toggle() method?

Question

jQuery deprecated toggle() method. It was way to easy to toggle classes, While searching stackoverflow I found various other methods to accomplish the same task( Alternative to jQuery's .toggle() method that supports eventData? ). Which jQuery snippet should be ideal to switch classes for this markup?

Thanks

Markup:

<a href="#">Toggle Class</a>
<div class="a"></div>

CSS:

.a{
background: #f2f2f2;
}
.b{
background: #ededed;
}

why not use `.toggleClass()` ? `toggle()` is only deprecated from binding events not from hiding and showing and `.toggleClass` is not deprecated — David Chase, Mar 27 '13 at 15:48
possible duplicate of [Toggle between two classes in jQuery](http://stackoverflow.com/questions/1644545/toggle-between-two-classes-in-jquery) — JJJ, Mar 27 '13 at 15:53
The selected duplicate is NOT a duplicate of this question, it actually suggests using the very code this question is trying to replace. I'm sure there is an exact duplicate though. — Kevin B, Mar 27 '13 at 15:56

Kevin B · Accepted Answer · 2014-02-03T15:46:33.720

11

In this case, simply use .toggleClass().

$("a").click(function(){
    $("div").toggleClass("a b");
});

edited Feb 03 '14 at 15:46

answered Mar 27 '13 at 15:48

Kevin B

94,570
16
163
180

score 0 · Answer 2 · answered Mar 27 '13 at 15:49

0

http://api.jquery.com/toggleClass/

toggleClass() seems to be what you want/need.

answered Mar 27 '13 at 15:49

Flater

12,908
4
39
62

damian · Answer 3 · 2015-09-10T03:06:10.583

0

If you have only 1 class to toggle (enabling and removing it), below should work fine:

$("a").click(function(){
        $(this).toggleClass('class1', '');
});

edited Sep 10 '15 at 03:06

answered Mar 21 '14 at 21:39

damian

25
7

or just `$(this).toggleClass('class1')` – Kevin B May 15 '14 at 14:11

score 0 · Answer 4 · answered Apr 11 '14 at 06:36

toggle() function used to toggle view. Which has performance issues.(will recommend not to use)

toggleClass() is used to toggle class.

case:1

<div id='mydiv' class="class1"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class2"></div>

case:2

<div id='mydiv' class="class2"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class1"></div>

case:3

<div id='mydiv' class="class1 class2 class3"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class3"></div>

Best alternative for jQuery toggle() method?

4 Answers4

Linked

Related