Lightweight Step Wizard Plugin In jQuery – jquery-steps.js

Step Wizard
File Size: 12.12 KB
Views Total: 3398 views
Last Update:March 20, 2023
Publish Date: April 19, 2017
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

The jQuery-steps is a jQuery plugin. it is light weight and customizable plugin. steps form work with 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 step wizard driven form with field validation.

Table of Contents

How to use :

1. Add HTML Code :

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

2. Add basic html structure :

<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 jquery plugin script :



Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.1.4
  • v1.1.3
  • v1.1.2
  • v1.1.1
  • v1.1.0
  • v1.0.3
  • v1.0.2
  • v1.0.1


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like