jQueryで作るスライドダウン効果のあるログインページ[js]

Registrationボタンをクリックすると入力項目がスライドダウンして表示されます。
設置方法は以下のようになります。

HTML

<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>

CSS

#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;
}

jQuery

$(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;
	});
});