Like stated in this example, I can show or hide some form elements that are in a specific group, based on the selected item in a bo box.

What I would like to do, is to maintain the same behavior but using links. For example, the first group is:

If I click on Join us, I would like to switch (to show) to the second group (and hide the first), like 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 a member yet?&nbsp;
        <a href="" class="to_register">Join us</a>
    </p>
    <p class="change_link group2_opts"> Are you just a 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 is a way to obtain this using links instead of bobox, like in the other example? Thank you

Like stated in this example, I can show or hide some form elements that are in a specific group, based on the selected item in a bo box.

What I would like to do, is to maintain the same behavior but using links. For example, the first group is:

If I click on Join us, I would like to switch (to show) to the second group (and hide the first), like 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 a member yet?&nbsp;
        <a href="" class="to_register">Join us</a>
    </p>
    <p class="change_link group2_opts"> Are you just a 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 is a way to obtain this using links instead of bobox, like in the other example? Thank you

• javascript
• jquery
• html
• css

• 2 What about using .toggle() on the anchor element? – Terry Commented Jun 19, 2014 at 14:42
• I think you forgot to post the jquery you have tried – Huangism Commented Jun 19, 2014 at 14:42
• @Terry as of jQuery 1.9, .toggle() has been deprecated so I'd stay clear of it. – Carl Edwards Commented Jun 19, 2014 at 14:57
• Working Demo : jsfiddle/hCmr6 – wrxsti Commented Jun 19, 2014 at 15:02

5 Answers 5

Bind to the click events, and show and hide the relevant fields:

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

Note that you won't need your CSS to do this - jQuery will take care of hiding/showing the elements for you.

@BigChris raises an excellent point, and it's worthy of an answer.

How do you plan to tell if someone submitted a "Registration" or a "Login"? Simply watching for the right input field(s) won't work, because it's possible someone starts to fill in the registration form, but then switches to the login form.

Right now, you have only one form, with one submit button.

For clarity, and to provide a clear separation, not only in your markup but in your form processing on the server, I would strongly remend that you change the markup to be two entirely separate forms. If you aren't willing / able to do that, then at least create two buttons.

Here's the revised HTML based on the two form concept:

<div id="registrate" class="group1">
<h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
<!-- The first form contains only registration info, and a submit named register -->
<form action="#" method="post" class="to_register">
    <p class="float">
       <input type="text" name="nickname" id="nickname" placeholder="Email..">
    </p>
    <p class="float">
       <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">
       <input type="password" name="password" placeholder="Confirm Password.." required><br/>
    </p>
    <p class="submit">
        <div class="button">
            <input type="submit" name="register" value="Login">
        </div>
    </p>
</form>
<!-- The second form is purely login, and has a submit named login -->
<form action="#" method="post" class="to_login">
    <p class="float">
       <input type="text" name="nickname" id="nickname" placeholder="Username or Email..">
    </p>
    <p class="float">
       <input type="password" name="password" placeholder="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="login" value="Login">
        </div>
    </p>
</form> 
    <h1></h1>
    <p class="change_link group1_opts"> Not a member yet?&nbsp;
        <a href="" class="to_register">Join us</a>
    </p>
    <p class="change_link group2_opts"> Are you just a member?&nbsp;
        <a href="" class="to_login">Login</a>
    </p>
 </div>

Note that I've changed the classes of the forms, and removed the classes on the p tags. The classes of the forms match the class of the links, so that the jQuery is simpler.

Then, your jQuery bees:

jQuery(function($) {
    $('a.to_register, a.to_login').click(function(event) {
        event.preventDefault();
        var cname = $(this).attr('class');
        $('form.' + cname).show();
        $('form').not('.' + cname).hide();
    });
});

Now, depending on your server-side language, you can watch for either $_POST['register'] or $_POST['login'] (the names of the submit buttons), to detect which they clicked, and what they intended.

I would honestly make two seperate forms. The code is very simple, and you can set two different actions in your forms. -- DEMO: http://jsfiddle/hCmr6/

jQuery:

$('.to_register, .to_login').click(function (e) {
    e.preventDefault();
    $('.loginform, .regform').slideToggle(400);
});

HTML:

<div id="registrate" class="group1">
    <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
    <form action="#" method="post" class="loginform">
        <p class="float group1_opts">
            <input type="text" name="nickname" id="nickname" placeholder="Username or Email.." />
        </p>
        <p class="float">
            <input type="password" name="password" placeholder="Password.." required />
            <br/>
        </p>
        <p class="float group2_opts"></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 a member yet?&nbsp; <a href="" class="to_register">Join us</a>

        </p>
    </form>


    <form action="#" method="post" class="regform">
        <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>
        <p class="change_link group2_opts">Are you just a member?&nbsp; <a href="" class="to_login">Login</a>

        </p>
    </form>
</div>

Hope this helps! Let me know if you have any questions!

using jQuery you can do this:

$(document).ready(function(){

    $('.to_register, .to_login').click(function() {
         $('.group1_opts').toggle();
         $('.group2_opts').toggle();
    });

});

edit: this works as long as the right stuff is hidden and shown at first

In JavaScript (sorry but I'm not using jQuery):

For that you need to use the onclick action from JavaScript and like your address "join us" to "#" to make it stay on the same page. Actually you can use onclick with pretty much anything so feel free to use a <p>, <img> or what ever. To make disappear / appear your input, just use:

function hide(id)
{
    var element = document.getElementById(id);
    element.style ="display: none;";
}

Also you can change the value of your <p> from "Join us" to "Login" and also change the action you want to call with onclick (switch between hide/show(id) and element.setAttribute("onclick", full_function);).