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' )
		login.style.display == 'block';
		regsiter.style.display == 'none';
	
}  
</script>  

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" ...>
    ...
</form>
<h4><a id="hasAccount" href="#login">Already Have an Account?</a></h4>
<form id="login" ...>
    ...
</form>

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');