Help with hiding and showing content

i have two forms, one is to register and the other one is to log in. i want to have them on the same page, with the registration form displaying. And just allowing the user to click a link and show the log in form and hide the registration form

This is what i got so far, i can’t get it to show the other form, it only hides both of them and displays nothing.

<script type="text/javascript">  
function toggleview(id) {  
	var login = document.getElementById(id);
	var regsiter = document.getElementById(id);
	if(id == 'login' ) == 'block'; == 'none';

The link looks like the following:

<h4><a href="#" onclick="toggleview('login')">Allready Have an Account?</a></h4> 

You should first get things right for when scripting is not used.
Have both forms on the page, where both are visible.

<form id="register" ...>
<h4><a id="hasAccount" href="#login">Already Have an Account?</a></h4>
<form id="login" ...>

Use a class name and CSS to perform the hiding of the page elements

.hidden {
    display: none;

Then just before the </body> tag, place a script that hides the login form.

document.getElementById('login').className = 'hidden';

and attaches the onclick event on to the hasAccount link

document.getElementById('hasAccount').onclick = toggleForms;

The toggleForms function can either do all of the work, or it can call a more generic function to toggle elements.

function toggleForms() {
    var login = document.getElementById('login');
    var register = document.getElementById('register');
    toggleClass(login, 'hidden');
    toggleClass(register, 'hidden');

And lastly, the function that does all of the work, the toggleClass function

function toggleClass(el, cls) {
    if (el.className === cls) {
        el.className = '';
    } else {
        el.className = cls;

That toggleClass function is only applicable if you know that there will only ever be 0 or 1 classes applied to an element.

If you want a more capable solution than the above toggleClass function, you can use a good set of hasClass, addClass, and removeClass functions instead, and use them to create a better toggleClass function

function toggleClass(el, cls) {
    if (hasClass(el, cls)) {
        removeClass(el, cls);
    } else {
        addClass(el, cls);

function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)'));
function addClass(ele,cls) {
	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
    	var reg = new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)');
		ele.className=ele.className.replace(reg,' ');

You could also then use addClass to hide the register form at the start,

//document.getElementById('login').className = 'hidden';
addClass(document.getElementById('login'), 'hidden');