title: Add/remove class on click to change background color of a div
body: <p>I've been trying to get a little black div to change color to green on click and change it back to black on the next click. I want it to keep doing this. </p>
  
  <p>Unfortunately it doesn't seem to work and through checking other topics on this I couldn't find my answer.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="block"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>   div
      {
          width: 100px;
          height: 100px;
          background-color: black;
      }
  </code></pre>
  
  <p>My jQuery:</p>
  
  <pre><code>  $(function(){
      $("#block").click(function(){
  
          if($(this).hasClass("faded") == false)
          {
              $(this).css("background-color", "green", function(){
              $(this).addClass("faded");
              });
          }
          else
          {
              $(this).css("background-color", "black", function(){
                  $(this).removeClass("faded");
              });
          }
      });
      });
  </code></pre>
  
  <p>Basically I'm trying to let it check whether my block has a certain class, if not add it and change the background color in my css to green. If it does have the class (which it will when it's green), remove it and change the background color in my css back to black. </p>
  
  <p>JSfiddle: <a href="http://jsfiddle.net/sVZtL/" rel="nofollow">http://jsfiddle.net/sVZtL/</a></p>
  
  <p>Thanks in advance guys!</p>