Markup

You need a form with the right markup as following.
Each fieldset will became a step.
The title of the fieldset will be the headers titles.
And the legend will be the header title description.
Inside the fieldset you put your stuffs.

<form>
  <fieldset title="Step 1">
    <legend>description one</legend>
    <!-- inputs -->
  </fieldset>

  <fieldset title="Step 2">
    <legend>description two</legend>
    <!-- inputs -->
  </fieldset>

  <input type="submit" />
</form>

Default

Using the default options.

Access

About you

Your professional informations

$('form').stepy();

Title Click

You can to use the header items to navigate between the steps with a click.
The header click is good when you have a lot of steps and want to jump a non sequential steps.

Access

About you

Your professional informations

$('.form').stepy({ titleClick: true });

Back Label and Next Label

The back and next navigation buttons has a label that you can chage.

Access

About you

Your professional informations

$('form').stepy({
  backLabel: '<<',
  nextLabel: '>>'
});

Description

Each step receives your description that is the legend element of the fieldset.
That element is used on header to describe the step, but you can disabled it.
Disable the description does not hide the original legend element. If you want to hide just the legend element, use CSS for it.

Access

About you

Your professional informations

$('form').stepy({ description: false });

Enter

By default, when you press the key enter, the next step will be called giving you a better usability.
If the option validate is enabled, then the step will be validated before.

Access

About you

Your professional informations

$('form').stepy({ enter: true });

Finish Button

Let the Stepy to move your submit button or your element with class stepy-finish to inside the last step as a finish button.
If you want let your button inside de form and visible during all steps, just turns this option off.

Access

About you

Your professional informations

$('form').stepy({ finishButton: false });

Finish

Callback to be called when you press the finish button. Inside it you can prevent the submit returning false.
The element that will trigger can be a submit type element or any other button with the class stepy-finish.

Access

About you

Your professional informations

$('form').stepy({
  finish: function() {
    alert('Canceling...');
    return false;
  }
});

Legend

Display the legend element on fieldset.
When this option is false, it's just hidden. The content of the legend element will be used to set the header description.

Access

About you

Your professional informations

$('form').stepy({ legend: false });

Next

This callback is trigged before you go to the next step.
Like the other callback, if you return false it won't go to the next step.
Here you can do your own validation, manually or using your favorite plugin.

Access

About you

Your professional informations

$('form').stepy({
  next: function(index) {
    alert('Going to step: ' + index);
  }
});

Back

This callback is trigged before you go to the back step.
Like the other callback, if you return false it won't go to the back step.

Access

About you

Your professional informations

$('form').stepy({
  back: function(index) {
    alert('Returning to step: ' + index);
  }
});

Select

This callback is trigged when the current step is rendered.
Here you can do actions to manipulate the current step with the elements shown to the user.

Access

About you

Your professional informations

$('form').stepy({
  select: function(index) {
    alert('Rendered step: ' + index);
  }
});

Title Target

You can change the place where the header will be rendered passing the selector of the element where the header will be appended.

Access

About you

Your professional informations

$('form').stepy({ titleClick:  true });

Transition and Duration

You can set an effect during the transitions between the steps.
You can choose fade, slide or undefined for the normal transition.

Access

About you

Your professional informations

$('form').stepy({
  duration  : 400,
  transition: 'fade'
});

Options:

back: undefined

Callback before the backward action.

backLabel: '< Back'

Change the back button label.

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.

finishButton: true

Include the button with class called '.finish' into the last step.

ignore: ''

Choose the fields to be ignored on validation.

legend: false

Choose if the legends of the steps will be showed.

nextLabel: 'Next >'

Change the next button label.

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

Active the jQuery Validation for each step.

Changing the settings globally:

You can change any option mentioning the scope $.fn.stepy.defaults. + option_name. It must be called before you bind the plugin.

$.fn.stepy.defaults.validate = true;
$.fn.stepy.defaults.titleClick = true;

Functions:

$('form').stepy('step');

Goes to the given step.

$('form').stepy('destroy');

Destroy the Stepy's bind and gives you the raw element before it.

Tests:

This plugin is tested to work better. Check it out!