Magical Sign-up Page with jQuery and CSS.

Magical Sign-up Page with jQuery and CSS.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() 
{
$(".buttons").click(function() 
{
var id = $(this).attr("id");
if(id=='step1')
{
$("#step1").remove();
$("#box2").slideDown(300);
$("#step2").slideDown(300);
}
else if(id=='step2')
{
$("#step2").remove();
$("#box3").slideDown(300);
$("#step3").slideDown(300);
}

else

{
$("#main").slideUp('slow',function() {$("#main").remove();});
$("#thank").html("Thank You");
}

return false;

});

});

</script>

HTML Code
Contains Simple html code $(".buttons").click(function(){}- buttons is the class name of registration button. Using $(this).attr("id") calling registration button ID value. 

<div id="main">

<form method="post" action="">

<div id="box1" >

step 1

</div>

<input type="submit" class="buttons" id="step1"

value=" Registration "/>

<div id="box2" >

step2

</div>

<input type="submit" class="buttons" id="step2"

value=" Registration "/>

<div id="box3" >

step 3

</div>

<input type="submit" class="buttons" id="step3"

value=" Registration Finished "/>

</form>

</div>

<div id="thank">

</div>

Note : Validation not applied.

More Information:
If you want to submit form values with out refreshing page take a look at following links.
Submit Form with out refreshing page with jQuery and Ajax
Comment system with jQuery, Ajax and PHP. 

CSS Code

#box1

{
width:400px; 
height:160px; 
background-color:#80C8E5
}

#box2

{
display:none;
width:400px; 
height:160px; 
background-color:#dedede
}

#box3

{
display:none;
width:400px; 
height:160px; 
background-color:#F38BAD
}

#step2

{
display:none;
}

#step3

{
display:none;
}