Question

Im trying to make the divs change class from “normal” to “thin” ONLY if they have the class “normal”. But somehow they just change back and forth, the IF statement seems to be written completely wrong 🙂

Here is the code

<div class="normal">1</div>
<div class="normal">2</div>
<div class="normal">3</div>
<div class="normal">4</div>
<div class="normal">5</div>
<div class="normal">6</div>

CSS:

.normal{
float:left;
height:200px;
width:100px;
border:1px dotted gray;
}

.thin{
float:left;
width:50px;
height:200px;
border:1px dotted gray;
background-color:#5a5a5a;
}

jQuery

$(document.body).click(function () {
  $("div").each(function () {
    if ($(this).hasClass("normal")) {
      $(this).toggleClass("thin", 300);         //Problem here?
    } else {
      this.style.color = "red";
    }
  });
});

Answer 1

@Egis as per your requirement the code should like below :

$(document.body).toggle(
    function () {
        $("div.normal").animate({
            width: "50px",
        }, "slow", function(){ $(this).addClass("thin"); });
    },
    function(){
        $("div.normal").animate({
            width: "100px",
        }, "slow", function(){ $(this).removeClass("thin"); });
    }
);

DEMO

I hope this is what you are looking for, Good Luck !!