Simple Customizable Step Wizard Plugin For jQuery - steps

File Size: 104 KB
Views Total: 34505
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Customizable Step Wizard Plugin For jQuery - steps

steps is a lightweight yet customizable jQuery plugin that converts any grouped elements into a step-by-step wizard with navigation buttons and callback functions.

It is easy to integrate other plugins e.g. jQuery validation plugin to create a wizard driven form with field validation.

Install & download:

$ npm install jquery.steps --save

See Also:

How to use it:

1. Load the latest version of jQuery and the jQuery steps plugin's files in your html document.

<link rel="stylesheet" href="jquery-steps.css">
<script src="//"></script>
<script src="jquery-steps.js"></script>

2. The basic html structure to create your own steps as follow:

<div id="demo">
  <div class="step-app">
    <ul class="step-steps">
      <li><a href="#step1">Step 1</a></li>
      <li><a href="#step2">Step 2</a></li>
      <li><a href="#step3">Step 3</a></li>
    <div class="step-content">
      <div class="step-tab-panel" id="step1">
      <div class="step-tab-panel" id="step2">
      <div class="step-tab-panel" id="step3">
    <div class="step-footer">
      <button data-direction="prev" class="step-btn">Previous</button>
      <button data-direction="next" class="step-btn">Next</button>
      <button data-direction="finish" class="step-btn">Finish</button>

3. Just call the plugin on the top container and you're done.


4. Possible options to customize the step wizard.

  startAt: 0,
  showBackButton: true,
  showFooterButtons: true,

5. Callback functions available.

  onInit: $.noop,
  onDestroy: $.noop,
  onFinish: $.noop,
  onChange: function onChange() {
    return true;

6. Default CSS classes & selectors.

  stepSelector: '.step-steps > li',
  contentSelector: '.step-content > .step-tab-panel',
  footerSelector: '.step-footer',
  buttonSelector: 'button',
  activeClass: 'active',
  doneClass: 'done',
  errorClass: 'error'

7. API methods.

var mySteps = $('#demo').steps();
steps_api ='plugin_Steps');

// go to the next step;

// back to the prev step

// finish the wizard

// get the current step index

// destroy the plugin



  • v1.1.4: Updated packages


  • v1.1.3: Updated package; added async example


  • v1.1.2: Fix get step index


  • fix: step index where step selectors not sibling


  • v1.1.0: updated package


  • v1.0.3: updated package


  • v1.0.2: Added next, prev and finish methods; Fixed example


  • v1.0.1

This awesome jQuery plugin is developed by oguzhanoya. For more Advanced Usages, please check the demo page or visit the official website.