Hide/Show Form Fields with CSS and jQuery

@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 recommend 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 becomes:

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.net/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);).