javascript - Hide/Show Form Fields with CSS and jQuery -

javascript - Hide/Show Form Fields with CSS and jQuery -

like stated in example, can show or hide form elements in specific group, based on selected item in combo box.

what do, maintain same behavior using links. example, first grouping is:

if click on join us, switch (to show) sec grouping (and hide first), this:

.. cyclically.

a basic html:

<div id="registrate" class="group1"> <form action="#" method="post" class="regform"> <h1><span class="log-in">log in</span> or <span class="sign-up">sign up</span></h1> <p class="float group1_opts"> <input type="text" name="nickname" id="nickname" placeholder="username or email.."> </p> <p class="float group2_opts"> <input type="text" name="nickname" id="nickname" placeholder="email.."> </p> <p class="float group2_opts"> <input type="text" name="nickname" id="nickname" placeholder="confirm email.."> </p> <p class="float"> <input type="password" name="password" placeholder="password.." required><br/> </p> <p class="float group2_opts"> <input type="password" name="password" placeholder="confirm password.." required><br/> </p> <p> <div class="remember"> <input type="checkbox" name="remember" value="none" id="remember"> <label for="remember"></label> </div> <label for="remember" class="remembermelabel">remember me</label> </p> <p class="submit"> <div class="button"> <input type="submit" name="submit" value="login"> </div> </p> <h1></h1> <p class="change_link group1_opts"> not fellow member yet?&nbsp; <a href="" class="to_register">join us</a> </p> <p class="change_link group2_opts"> member?&nbsp; <a href="" class="to_login">login</a> </p> </form>

a basic css:

.group1_opts, .group2_opts { display: none; } .group1 .group1_opts, .group2 .group2_opts { display: block; }

there way obtain using links instead of combobox, in other example? give thanks you

bind click events, , show , hide relevant fields:

$('.to_register').click(function() { $('.group1_opts').hide(); $('.group2_opts').show(); }); $('.to_login').click(function() { $('.group1_opts').show(); $('.group2_opts').hide(); });

note won't need css - jquery take care of hiding/showing elements you.

javascript jquery html css