jQuery toggleClass doesn't switch class

Question

i've been trying to understand toggleClass function by making this simple script, yet it didn't work the way I expected it to.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style type="text/css">
        body {
            font-family: "Kozuka Gothic Pro";
        }

        .red {
            background: red;
        }

        .blue {
            background: blue;
        }

        div {
            width: 200px;
            height: 200px;
        }

    </style>
</head>

<body>
    <div class="blue"></div>

    <script>
        $("div").click(function() {
            $(this).toggleClass("red");
        });
    </script>
</body>

However, if i changed the div class to red and the toggleClass argument to "blue" it works, can anybody explain me this? I'm hoping to hear from you. Thanks in advance!

Rohan Kumar · Accepted Answer · 2015-02-12 05:53:28Z

4

You need to add both blue and red class in toggleClass function to change both like,

$("div").click(function() {
     $(this).toggleClass("red blue");
});

$("div").click(function() {
  $(this).toggleClass("red blue");
});

body {
            font-family: "Kozuka Gothic Pro";
        }

        .red {
            background: red;
        }

        .blue {
            background: blue;
        }

        div {
            width: 200px;
            height: 200px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>

What happens when you use only red in togleclass function then it will applied but the change would not overwrite because of the blue class and the blue background shown as it is. So, if you want your code to work then in that case you need to use !important in red-background like,

.red {
    background: red !important;
}

$("div").click(function() {
  $(this).toggleClass("red");
});

body {
            font-family: "Kozuka Gothic Pro";
        }

        .red {
            background: red !important;
        }

        .blue {
            background: blue;
        }

        div {
            width: 200px;
            height: 200px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>

Note that I am just informing you (by second alternative) why your code was not working. You must go with my first option.

edited Feb 12, 2015 at 5:53

answered Feb 12, 2015 at 5:40

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

epascarello Over a year ago

Do not use important! That is BAD BAD advice.

Drexel Over a year ago

Thanks for that, i see the reason why now!

Rohan Kumar Over a year ago

@epascarello Agreed, but I have just gave an example how the OP's code can work without changing the js code and explained why his code was not working.

Shijin TR · Accepted Answer · 2015-02-12 05:40:09Z

1

$("div").click(function() {
            
            $(this).toggleClass("red");
            $(this).toggleClass("blue");
        });

 body {
            font-family: "Kozuka Gothic Pro";
        }

        .red {
            background: red;
        }

        .blue {
            background: blue;
        }

        div {
            width: 200px;
            height: 200px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="blue"></div>

 $("div").click(function() {

        $(this).toggleClass("red");
        $(this).toggleClass("blue");
    });

answered Feb 12, 2015 at 5:40

Shijin TR

7,80911 gold badges64 silver badges126 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2015-02-12 05:41:22Z

0

Try this : pass both red and blue class, it will remove if present and add if not. So for first time it will add red but will remove blue.

$("div").click(function() {
        $(this).toggleClass("red blue");
    });

answered Feb 12, 2015 at 5:41

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

prog1011 · Accepted Answer · 2015-02-12 05:43:20Z

0

The toggleClass() method toggles between adding and removing one or more class names from the selected elements.

This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.

Explanation Below

it act as - if div have class "red" then REMOVE class "red" else ADD "red" class from div

answered Feb 12, 2015 at 5:43

prog1011

3,4856 gold badges34 silver badges59 bronze badges

Comments

Ankit Saroch · Accepted Answer · 2015-02-12 05:50:11Z

0

The problem arises due to order of the css styles, as last css style will affect the output, so as css on class blue is declared last, so blue class is given precedence over red class.

So, to solve this, you should try to have only one class on the div, so that the order of the css should not matter.

$("div").click(function() {
    $(this).toggleClass("red blue");
});

answered Feb 12, 2015 at 5:50

Ankit Saroch

6907 silver badges14 bronze badges

Comments

Nick Vasic · Accepted Answer · 2015-02-12 06:05:46Z

The toggleClass() will remove the class if it is assigned to the element, or it will add it if it is not assigned to the element. Try this snippet as a demo:

$(document).ready(function() {
  $("div").click(function() {
    if ($(this).hasClass("red")) {
      alert("I am red! I'm turning red off.");
      $(this).toggleClass("red");
    } else if ($(this).hasClass("blue")) {
      alert("I am blue! I'm turning blue off.");
      $(this).toggleClass("blue");
    } else {
      alert("I am blank! Turning red on.");
      $(this).toggleClass("red");
    }
  });
});

    body {
      font-family: "Kozuka Gothic Pro";
    }
    .red {
      background: red;
    }
    .blue {
      background: blue;
    }
    div {
      width: 200px;
      height: 200px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="blue"></div>

Collectives™ on Stack Overflow

jQuery toggleClass doesn't switch class

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related