title: jQuery use .hasClass to run several different methods
body: <p>I'm trying to use <code>.hasClass</code> as a sort of <em>if statement</em>. By determining which class the clicked element has, I'm running several different methods.</p>
  
  <p>If the span clicked has a class of <code>inactive</code> then I wish to:</p>
  
  <ol>
  <li>Remove the class <code>inactive</code></li>
  <li>Add new class <code>active</code></li>
  <li>Make the next sibling div with class <code>definition</code> slide down (using <code>.next</code>)</li>
  </ol>
  
  <p>And in the reverse, if the span clicked has a class of <code>active</code> then:</p>
  
  <ol>
  <li>Remove the class <code>active</code></li>
  <li>Add class <code>inactive</code></li>
  <li>Make the next sibling div with class <code>definition</code> slide up.</li>
  </ol>
  
  <p>Essentially I'm showing or hiding a certain element and adding some styling using the classnames.</p>
  
  <p>Full JS Fiddle here:</p>
  
  <p><strong><a href="http://jsfiddle.net/franhaselden/9ms79uhe/3/" rel="nofollow">http://jsfiddle.net/franhaselden/9ms79uhe/3/</a></strong></p>
  
  <p>I had it working OK just using <code>this</code> for the active class, but when I tried to add in <code>.hasClass</code> it stopped working. Am I using <code>.hasClass</code> incorrectly?</p>
  
  <p>I get the error <em>undefined is not a function</em> on line 6, so the start of my <code>.hasClass</code> line.</p>
  
  <p>Here is the jQuery:</p>
  
  <pre><code>$( "#jargon-main span" ).click(function() { 
      // if class = "active" then:
        // remove class active
        // add class inactive
        // make .next sibling with class .definition slideUp
      $(this).hasClass("active").removeClass('active').addClass('inactive').next(".definition").slideUp( "fast", function() {});
  
      // if class = "inactive" then:
          // remove class inactive
          // add class active
          // make .next sibling with class .definition slideDown
       $(this).hasClass("inactive").removeClass('inactive').addClass('active').next(".definition").slideDown( "fast", function() {});
  
  });
  </code></pre>