title: Hide/Show Form Fields with CSS and jQuery
body: <p>Like stated in this <a href="http://pixelentity.com/freebies/hide-form-fields-with-css-and-jquery/" rel="nofollow noreferrer">example</a>, I can show or hide some form elements that are in a specific group, based on the selected item in a combo box.</p>
  
  <p>What I would like to do, is to maintain the same behavior but using links. For example, the first group is:</p>
  
  <p><img src="https://i.stack.imgur.com/3CK1o.png" alt="Login Page"></p>
  
  <p>If I click on <strong>Join us</strong>, I would like to switch (to show) to the second group (and hide the first), like this:</p>
  
  <p><img src="https://i.stack.imgur.com/owdQx.png" alt="enter image description here"></p>
  
  <p>.. cyclically.</p>
  
  <p>A basic HTML:</p>
  
  <pre><code>&lt;div id="registrate" class="group1"&gt;
  &lt;form action="#" method="post" class="regform"&gt;
      &lt;h1&gt;&lt;span class="log-in"&gt;Log in&lt;/span&gt; or &lt;span class="sign-up"&gt;sign up&lt;/span&gt;&lt;/h1&gt;
  
      &lt;p class="float group1_opts"&gt;
         &lt;input type="text" name="nickname" id="nickname" placeholder="Username or Email.."&gt;
      &lt;/p&gt;
  
      &lt;p class="float group2_opts"&gt;
         &lt;input type="text" name="nickname" id="nickname" placeholder="Email.."&gt;
      &lt;/p&gt;
      &lt;p class="float group2_opts"&gt;
         &lt;input type="text" name="nickname" id="nickname" placeholder="Confirm Email.."&gt;
      &lt;/p&gt;
  
      &lt;p class="float"&gt;
         &lt;input type="password" name="password" placeholder="Password.." required&gt;&lt;br/&gt;
      &lt;/p&gt;
  
      &lt;p class="float group2_opts"&gt;
         &lt;input type="password" name="password" placeholder="Confirm Password.." required&gt;&lt;br/&gt;
      &lt;/p&gt;
  
      &lt;p&gt;
          &lt;div class="remember"&gt;
              &lt;input type="checkbox" name="remember" value="None" id="remember"&gt;
              &lt;label for="remember"&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;label for="remember" class="remembermelabel"&gt;Remember Me&lt;/label&gt;
      &lt;/p&gt; 
  
      &lt;p class="submit"&gt;
          &lt;div class="button"&gt;
              &lt;input type="submit" name="submit" value="Login"&gt;
          &lt;/div&gt;
      &lt;/p&gt;
      &lt;h1&gt;&lt;/h1&gt;
      &lt;p class="change_link group1_opts"&gt; Not a member yet?&amp;nbsp;
          &lt;a href="" class="to_register"&gt;Join us&lt;/a&gt;
      &lt;/p&gt;
      &lt;p class="change_link group2_opts"&gt; Are you just a member?&amp;nbsp;
          &lt;a href="" class="to_login"&gt;Login&lt;/a&gt;
      &lt;/p&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p></p>
  
  <p>A basic CSS:</p>
  
  <pre><code>.group1_opts, .group2_opts {
     display: none;
  }
  
  .group1 .group1_opts, .group2 .group2_opts {
     display: block;
  }
  </code></pre>
  
  <p>There is a way to obtain this using links instead of combobox, like in the other example?
  Thank you</p>