jWizard A jQuery UI Widget for all your Wizard Form Needs!

<!-- jquery ui theme -->
<link rel="stylesheet" href="/path/to/jquery-ui.css" />
<!-- required CSS basics -->
<link rel="stylesheet" href="/path/to/jWizard.base.css" />

<!-- duh -->
<script type="text/javascript" src="/path/to/jquery.js"></script>
<!-- at least the widget factory -->
<script type="text/javascript" src="/path/to/jquery-ui.js"></script>
<!-- and the plugin itself -->
<script type="text/javascript" src="/path/to/jWizard.min.js"></script>

<!-- Can be a form with nested fieldset/legend (legend = titles) -->
<form id="wizard-form" class="jWizard">
    <fieldset>
        <legend>Beginning</legend>
        <p>Are you sure you want to begin? Press "Next" to proceed?</p>
    </fieldset>
    <fieldset>
        <legend>Middle</legend>
        <p>Are you sure you want to?</p>
        <p>You can still go back. Or press "Next" again to confirm.</p>
    </fieldset>
    <fieldset>
        <legend>End</legend>
        <p>Done, click "Finish" to end</p>
    </fieldset>
</form>

<!-- Can also just be divs with title attributes -->
<div id="wizard-div" class="jWizard">
    <div title="Beginning">
        <p>Are you sure you want to begin? Press "Next" to proceed?</p>
    </div>
    <div title="Middle">
        <p>Are you sure you want to?</p>
        <p>You can still go back. Or press "Next" again to confirm.</p>
    </div>
    <div title="End">
        <p>Done, click "Finish" to end</p>
    </div>
</div>

$(".jWizard").jWizard({
    menuEnable: true,
    counter: {
        enable: true,
        progressbar: true
    },
    effects: { enable: true }
});