title: JQuery hasClass - why does it always return false in this case?
body: <p>I have a span with a background image that I want to alternate between a background image of a plus and minus on click. I want to add and remove the class 'open' to do this. My span looks like this...</p>
  
  <pre><code>&lt;span class="expand open"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>And my JQuery looks like this...</p>
  
  <pre><code>$(function() {
      $('.expand').click(function() {
          if ($(this).hasClass('open')) {
              $(this).removeClass('open');
          } else {
              $(this).addClass('open');
          }
      });
  });
  </code></pre>
  
  <p>The behaviour I'm getting is that it will add the class 'open' but then after repeated clicks will not remove it again. Logging to the console has shown that my if statement is always evaluating false.</p>
  
  <p>I've considered using toggleClass but haven't done so because once this is working I intend to use the same if statement to show / hide content blocks.</p>
  
  <p><a href="http://jsfiddle.net/Vz7YL/" rel="nofollow">http://jsfiddle.net/Vz7YL/</a></p>
  
  <p>EDIT
  Since people are focussing on my css, I'll provide that too. (SASS/SCSS):</p>
  
  <pre><code>.expand {
      background: url(/images/plus-minus-orange.gif) top center no-repeat;
      display: block;
      height: 21px;
      margin: 0 auto;
      width: 22px;
      &amp;.open {
          background: url(/images/plus-minus-orange.gif) bottom center no-repeat;
      }
  }
  </code></pre>
  
  <p>Can I also add that the span IS displaying correctly and IS clickable, and I cannot recreate the problem with a simplified version of the code.</p>