title: jQuery toggle text change and hide elements
body: <p>Trying to create a simple function where a user clicks a button, it shows a form and changes the text on the button. When they click it again, the form hides and button text changes back to what it was.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>$('a.subscribe').click(function() {
  var link = $(this);
  $('.intro_cta form').toggle(function(){
      if ($(this).is(':visible')) {
          $('a.enter').css('display','none');
          link.text('CLOSE');
  
      } else {
          link.text('SUBSCRIBE'); 
          $('a.enter').css('display','block');
      }     
  }); 
  });
  </code></pre>
  
  <p>And the HTML markup:</p>
  
  <pre><code>&lt;a href="#" class="subscribe button white"&gt;SUBSCRIBE&lt;/a&gt;
      &lt;form class="subscribe_form"&gt;
          &lt;input type="text" placeholder="EMAIL"/&gt;
          &lt;input type="submit" value="JOIN" /&gt;
  
      &lt;/form&gt;
      &lt;a href="&lt;?php echo site_url(); ?&gt;/home" class="enter button green"&gt;ENTER&lt;/a&gt;
  </code></pre>
  
  <p>When the user clicks the SUBSCRIBE button, it should show the form and hide the ENTER BUTTON and change the text on the subscribe button to "CLOSE". The opposite should happen when the button is pressed again. </p>
  
  <p>This does kind of work, however the toggle makes the form slide in - I just want it to show or hide.</p>