title: Toggling a background color change by clicking
body: <p>I was quickly doing a jsFiddle to learn more about the jQuery API, and a fiddle isn't working the way I expected.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/7j5Fc/" rel="nofollow">http://jsfiddle.net/7j5Fc/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
  background:red;
  height:100px;
  width:150px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('div').click(
      function(){
          $(this).toggle(function(){
              $(this).style.background="blue";
          }
          //function(){
          //this.style.background = "orange";
          //}
          );
      }
  );
  </code></pre>
  
  <p>Strangely, the div disappears when I click it, and if I uncomment the commented lines the sketch doesn't work at all. Any suggestions or info appreciated.</p>