jQuery Stepy is a plugin that generates a customizable wizard.
back: undefined // Callback before the backward action.
block: false // Block the next step if the current is invalid.
description: false // Choose if the descriptions of the titles will be showed.
duration: 0 // Duration of the transition between steps in ms.
enter: true // Enables the enter key to change to the next step.
errorImage: false // If an error occurs, a image is showed in the title of the corresponding step.
finish: undefined // Callback before the finish action.
finishButto: true // Include the button with class called '.finish' into the last step.
header: true // Creates a header with title and description.
ignore: '' // Choose the fields to be ignored on validation.
legend: false // Choose if the legends of the steps will be showed.
next: undefined // Callback before the forward action.
select: undefined // Callback executed when the step is shown.
titleClick: true // Active the back and next action in the titles.
titleTarget: undefined // Choose the place where titles will be placed.
transition: 'hide' // Use transition between steps ('hide', 'fade' or 'slide').
validate: undefined // Callback to each field of each step.
<form>
<fieldset title="Step 1" class="stepy-step">
<legend class="stepy-legend">description one</legend>
<!-- inputs -->
</fieldset>
<fieldset title="Step 2" class="stepy-step">
<legend class="stepy-legend">description two</legend>
<!-- inputs -->
</fieldset>
<a class="stepy-back">back</a>
<a class="stepy-next">next</a>
<input type="submit" class="stepy-finish" />
</form>
$('form').stepy();
$('form').stepy('step', 2); // Changes the form to the second step.
$('form').stepy('destroy'); // Destroy the Stepy's bind and gives you the raw element.