Quick Introduction

jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. Check out the demos and get a first-hand impression!

Features

Accessability support
Make it visible for everyone without extra work - just use it.
Async content loading
Load your content asynchronously via AJAX by calling e.g. a REST service.
Cool transition effects
Beautiful & sleek transition effects complete the offer.
Dynamic Manipulation
Add or remove steps dynamically via API.
Easy Navigation
Navigate in various different way using the keyboard, steps or pager - it is up to you.
State Persistence
Enable the saveState option - this will save your current step position of each individual wizard *.
Form validation made easy
Embed a validation plugin of your choice and customize it like you want - it is just that simple.
Embedded iframe content
Embed your content via an iframe - it feels like it would be a part of your site.
Keyboard navigation
Use your keyboard to navigate through your content.
Multiple wizards
Have multiple wizards on one page or even have nested wizards like you want.
Vertical Navigation
Switch to vertical navigation if you need.
And much more ...
Take a look to the examples and learn more about it.
* The step position will be saved into a cookie after a step change, add or remove. After a refresh the latest active step becomes active again.

Buy me a beer

Hey guys, I invested tons of time and still investing to offer you a great feeling and nice looking component. So if you like it, I would very appreciate a beer donation ;-) Thanks.

Download

jQuery Steps is an open-source project hosted on GitHub and can be therefore downloaded in many different ways. The easiest and fastest way to get started is to download the compiled & minified version.

Compiled & Minified

No documentation included; just the bare JS files.
Download

Source Code

Contains the original source files. By using the grunt api command the API documentation will be automatically built.
Download source

Basic Example

The simplest template to get started is the following.
Everything you need to start is:
  1. Include jQuery and jQuery Steps in your HTML code.
  2. Then select an element represents the wizard and call the steps method.
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

  4.         <title>Demo</title>
    5. 

  5.         <meta charset="utf-8">
    6. 

  6.         <script src="jquery.js"></script> 
    7. 

  7.         <script src="jquery.steps.js"></script>
    8. 

  8.     </head>
    9. 

  9.     <body>
    10. 

  10.         <script>
    11. 

  11.             $("#wizard").steps();
    12. 

  12.         </script>
    13. 

  13.         <div id="wizard"></div>
    14. 

  14.     </body>
    15. 

  15. </html>
    16.

How to add initial steps?

There are two ways to add steps and their corresponding content.
1. Add HTML code into the representing wizard element.
    

  1. <div id="wizard">
    2. 

  2.     <h1>First Step</h1>
    3. 

  3.     <div>First Content</div>
    4. 

  4.  
    5. 

  5.     <h1>Second Step</h1>
    6. 

  6.     <div>Second Content</div>
    7. 

  7. </div>
    8.
2. Or use the API to add steps dynamically.
    

  1. // Initialize wizard
    2. 

  2. var wizard = $("#wizard").steps();
    3. 

  3.  
    4. 

  4. // Add step
    5. 

  5. wizard.steps("add", {
    6. 

  6.     title: "HTML code", 
    7. 

  7.     content: "<strong>HTML code</strong>"
    8. 

  8. });
    9.

Documentation

There are two ways to get the documentation but the recommended way is to use the wiki site.
  1. Visit the project specific GitHub wiki or
  2. download the source code and use the grunt api command.
Info: The documentation is currently maintained via the GitHub wiki but will be moved to jquery-steps.com later this year.