Creating a simple jQuery slide-down login form

January 6, 2012

jQuery can really add some great touches to a website and one that is easy to do is a slide-down form.

[cta id=’1682′]
<div id ="login_container"> 
<a href="#" onClick="openForm()">Login</a>
<div id="login_form">
<form action="" method="post" name="form1">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="pword" /><br />
<input type="submit"  /><br />

Obviously we want to initially hide the form and display it on the “Login” link:


There is a very important part lying in that CSS and that is the container needs to be absolutely positioned. Otherwise it will push all other block elements down when the form flies open.

Finally, we need the jQuery to make it all happen

function openForm()
	 if ($("#login_form").is(":hidden")){

Now you have a great UI component that gives a user access to the login form at anytime but doesn’t clog up the design.

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive