title: Displaying different forms using JQuery slideToggle
body: <p>I'm a beginner with JQuery and I wanted to display a hidden log in form and a hidden sign up form using the slide toggle function. The problem that I'm having is that once I click on a link, the form does appear but the link next to it gets pushed as well depending on the width of the form which ruins the look of the entire menu. Is there a way to prevent this from happening?</p>
  
  <p>My code for the html part is like this:</p>
  
  <pre><code>&lt;!-- Login Starts Here --&gt;
  &lt;div id="loginContainer"&gt;
      &lt;a href="#" id="loginButton"&gt;&lt;span&gt;LOGIN&lt;/span&gt;&lt;em&gt;&lt;/em&gt;&lt;/a&gt;
          &lt;div id="loginBox" style="display:none"&gt;                
              &lt;form id="loginForm"&gt;
              &lt;!--FORM STUFF--&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Login Ends Here --&gt;
  &lt;!-- Sign Up Starts Here --&gt;
  &lt;div id="signUpContainer"&gt;
      &lt;a href="#" id="signUpButton"&gt;&lt;span&gt;Sign Up&lt;/span&gt;&lt;em&gt;&lt;/em&gt;&lt;/a&gt;
          &lt;div id="signUpBox" style="display:none"&gt;                
              &lt;form id="signUpForm"&gt;
              &lt;!--FORM STUFF--&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My code for the JQuery part looks like this:</p>
  
  <pre><code>$(function () {
       $('#signUpButton').click(function () {
           $('#signUpBox').slideToggle(200);
           $(this).toggleClass("active");
       });
       $('#loginButton').click(function () {
           $('#loginBox').slideToggle(200);
           $(this).toggleClass("active");
       });
   });
  </code></pre>
  
  <p>I've also made a jsfiddle to better demonstrate the problem that I'm having: 
  <a href="http://jsfiddle.net/smsyr/3/" rel="nofollow">http://jsfiddle.net/smsyr/3/</a></p>
  
  <p>Any help would be appreciated. Thank you very much!</p>