title: jquery toggle() adding and removing a class
body: <p>I have created a simple jQuery toggle function which adds and removes the class <code>formVisable</code>the toggle function is adding the class how in the wrong place <a href="http://jsfiddle.net/newkidontheblock/norg5k2o/2/" rel="nofollow">CLICK HERE</a>. </p>
  
  <p>I want to add the class to the following element <code>&lt;div id="hide-overlay"&gt;</code> however at the moment the class is being added to my button element <code>&lt;a id="show-form"&gt;</code>. Below is a snippet of my code </p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="row promo-image responsive"&gt;
          &lt;figure&gt;
              &lt;figcaption class="caption"&gt;
                  &lt;a id="show-form" class="promo-button" href="#"&gt;
                      &lt;span&gt;Be More Productive&lt;/span&gt;
                      &lt;i class="fa fa-download"&gt;&lt;/i&gt;  
                  &lt;/a&gt;
                  &lt;h4&gt;Download the 8 steps for successful collabration&lt;/h4&gt;
              &lt;/figcaption&gt;
          &lt;/figure&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>HIDDEN ELEMENT</p>
  
  <pre><code>&lt;div id="hide-overlay"&gt;
      &lt;a id="hide-form-close" href=""&gt;&lt;i class="fa fa-times fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;div class="col-sm-6 col-sm-offset-3 form-container"&gt;
          &lt;h2 class="business"&gt;Register&lt;/h2&gt;
         &lt;form class="main-contact submit-fade ajax-form" action="process.php" method="POST"&gt;
              &lt;ul class="small-block-grid-2 medium-block-grid-2 hide-form"&gt;
                 &lt;li&gt;
                    &lt;label for="name"&gt;Name&lt;/label&gt;
                    &lt;input type="text" class="form-control" name="name" placeholder="Name" required&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                    &lt;label for="email"&gt;Email&lt;/label&gt;
                    &lt;input type="text" class="form-control" name="email" placeholder="Email"&gt;
                   &lt;/li&gt;
                &lt;/ul&gt;
                &lt;input type="submit" class="btn btn-success"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY </p>
  
  <pre><code>var $hideOverlay = $("#hideOverlay").hide();
  $("#show-form").on("click", function(e){
     $(this).toggleClass("formVisable");
  });
  </code></pre>