title: Toggling classes using jQuery
body: <p>I have a popup element here:</p>
  
  <pre><code>&lt;div id="contactme" class="closed"&gt; 
     &lt;a href="javascript:void(0);" onclick="toggle_contactme"&gt;Close&lt;/a&gt;       
  &lt;/div&gt;
  &lt;a href="javascript:void(0);" onclick="toggle_contactme"&gt;Open&lt;/a&gt;
  </code></pre>
  
  <p>I have made two classes <strong><code>.open</code></strong> and <strong><code>.closed</code></strong> each with the css:</p>
  
  <pre><code>.closed{
    visibility: hidden;
  }
  .open{
    visibility: visible;
  }
  </code></pre>
  
  <p>Using jQuery I have found errors with opening and closing the popup, and i'm unsure whether it is the CSS or just incorrect jQuery.</p>
  
  <p>Here is the function when you click on the open or close button:</p>
  
  <pre><code>function toggle_contactme(){
  
     if ($("#contactme").hasClass("closed")) {
  
         $("#contactme").removeClass("closed").addClass("open");
  
     }else if ( $("#contactme").hasClass("open") ){
  
         $("#contactme").removeClass("open").addClass("closed");
  
     };
  
  }
  </code></pre>
  
  <p>When running this code, it opens the popup but fails to close it, any help would be appreciated!</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/ZXCEv/" rel="nofollow">http://jsfiddle.net/ZXCEv/</a></p>