I understand that are great plugins for auto-creating multi-part forms but my requirement is pretty simple and basic:
html:
<form action="">
<fieldset class="step step1">
fields ...
<button class="continue">Continue</button>
</fieldset>
<fieldset class="step step2">
fields ...
<button class="back">Back</button>
<button class="continue">Continue</button>
</fieldset>
<fieldset class="step step3">
fields ...
<button class="back">Back</button>
<button class="submit">Submit</button>
</fieldset>
</form>开发者_如何转开发
I want to show only one step fieldset at a time and slide (left to right and vice versa) using continue/back buttons.
I'd appreciate any help.
Thanks!
$('.step1').siblings().hide(); // hide all except step 1
$('.continue').click(function(){
$(this).closest('.step').hide().next('.step').show();
return false;
});
$('.back').click(function(){
$(this).closest('.step').hide().prev('.step').show();
return false;
});
simple demo
精彩评论