テーブル内にフォームがあり、フォームの半分を表示したい場合、ユーザーはステップ 2 ボタンを押して、その下にある残りのフォームを同じフォームと div に切り替えることができます。
hideform という div id を使用して、ボタンがクリックされるまで表示プロパティを none に変更しようとしていました
HTML
<div id="form">
<h1>Booking</h1>
<p>Fill in form</p>
<form id="contactform">
<table id="formtable">
<tr>
<td>
<label class="label" for="name">Full Name</label>
</td>
<td>
<input class="input" id="name" type="text">
</td>
</tr>
<tr>
<td>
<label class="label" for="email">E-mail Address</label>
</td>
<td>
<input class="input" id="email" type="email">
</td>
</tr>
<tr>
<td>
<label class="label" for="date">Date</label>
</td>
<td>
<input class="input" type="text" id="datepicker" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="continue" type="button" class="submitbtn" value="Continue.." >
</td>
</tr>
<div id="hideform">
<tr>
<td>
<label class="label" for="telephone">Telephone</label>
</td>
<td>
<input class="input" id="telephone" type="text">
</td>
</tr>
<tr>
<td>
<label class="label" for="location">Location</label>
</td>
<td>
<input class="input" id="location" type="text">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="submit" type="submit" class="submitbtn" value="Submit" >
</td>
</tr>
</div>
</table>
</form>
</div>
<script>
$("#submit").click(function () {
$(".hide").show("slow");
});
</script>
CSS
#form{
float:left;
background:#0b0b0b;
padding:0 0 10px 0;
border-radius:3px;
width:29%;
margin:0 15px 0 0;
}
#hideform{
display:none;
}