javascript - change active state on div's by clicking a link -

i'm having issues login-box. i'm using own version logic behind tutorial online. works fine right now. when click login button, jquery trigger displays window has class active assigned it. , once login box has appears, user click on register in login box , register window becomes active. know bit hard follow here question should easy. want press new button next login, takes user directly register. need set active state different forms depending on button press. i'm trying make js script senses link has been click , sets active state form. first code links, right both of them open login box @ signin stage. goal second 1 open register stage. possible? how can set active state right form in click ?

here jsfiddle

html

<li><a href="#login-box" id="signin" class="linkform login-window">login</a></li> <li><a href="#login-box" rel="register" class="linkform login-window">register</a></li>  <div id="login-box" class="login-popup"></div> <form class="register" >         <input type="text" name="login" placeholder="email">     <input type="password" name='password' placeholder="pass" required>      <input type="submit" name="submit" value="reg">     <a href="index.html" rel="signin" class="linkform forgot right">login</a> </form>  <form class="signin active">     <input type="text" name="login" placeholder="email">     <input type="password" name='password' placeholder="pass" required>     <input type="submit" name="submit" value="login">     <a href="register.html" rel="register" class="linkform forgot right">reg</a> </form> 

javascript

$(function() {     //the form wrapper (includes forms)     var $form_wrapper = $('#login-box'),         //the current form 1 class active         $currentform = $form_wrapper.children('form.active'),         //the change form links         $linkform = $form_wrapper.find('.linkform');      $linkform.bind('click', function(e) {         var $link = $(this);         var target = $link.attr('rel');         $currentform.fadeout(400, function() {             //remove class active current form             $currentform.removeclass('active');             //new current form             $currentform = $form_wrapper.children('form.' + target);             //animate wrapper             $form_wrapper.stop()                 .animate({                         height: $currentform.data('height') + 'px'                     }, 500, function() {                         //new form gets class active                         $currentform.addclass('active');                         //show new form                         $currentform.fadein(400);                     });         });         e.preventdefault();     }); }); 

i re-read question, think hear having problems:

// note: add id="signinform" , id="registerform" forms, suggest on class="signin" , class="register" you'll have 1 signin/register form throughout app. // rename rel="register" id="register", why using rel? http://www.w3schools.com/tags/att_a_rel.asp $("#signin").click(function() {     $("#registerform").removeclass("active");     $("#signinform").addclass("active"); }); $("#register").click(function() {     $("#signinform").removeclass("active");     $("#registerform").addclass("active"); }); 

to access , submit form, create click event submit buttons:

 $("input[type=submit]").click(function() {     var form = $("form.active")[0];     form.submit();  });