[Bootstrap] Easily Create Self-Managed Wizards With jQuery | jq-wizard.js

jQuery Wizard is a component for creating separately managed wizards, using jQuery. jq-wizard.js extension for creating a practical and interactive wizard interface by breaking long content blocks into individual steps.

jquery wizard example, jquery smart wizard, jquery bs wizard, jquery form wizard, jquery steps, jquery form wizard with validation, jquery steps example

How to make use of it:

1. To get began, download the plugin and put the jq-wizard.js script after loading the newest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jq-wizard.js"></script>

2. Create steps along with Prev and Next navigation buttons for the wizard interface.

<div id="example">
  <div class="wizard-tab" stepname="step1">
    <h1>This is the first step</h1>
  <div class="wizard-tab" stepname="step2">
    <h1>This is the second step</h1>
  <div class="wizard-tab" stepname="step3">
    <h1>This is the last step</h1>
    <div class="step"></div>
    <div class="step"></div>
    <div class="step"></div>
    <button class="btn-prev">Prev</button>
    <button class="btn-next">Next</button>
    <button class="btn-end">Done</button>

3. Call the plugin to allow the wizard interface.

$(function() {

4. Config the wizard interface with the next choices.


  // Selector to select the step indicators
  stepobject: '.step',

  // Class used to mark those steps that have already been done                             
  stepactiveclass: 'active',

  // Selector for each tab                        
  tabselector: 'div.wizard-tab',

  // Attribute used to provide the name of the step              
  stepnameattr: 'stepname',

  // Hides "next" button if disabled
  autohidenext: true,     

  // Hides "prev" button if disabled
  autohideprev: false,

  // Hides "end" button if disabled
  autohideend: true,      

  // Automatically sets the focus on the first input INSIDE the tab, when shown
  autofocus: true,

  // Called when an object has to be hidden (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); 
  // maybe you want to set a custom class, instead; receives the jquery obj as parameter
  hidefnc: function($obj) { $obj.hide() },

  // Called when an object has to be shown (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); 
  // maybe you want to set a custom class, instead; receives the jquery obj as parameter
  showfnc: function($obj) { $obj.show() },  


5. Event handlers.


  // Called *before* passing to the next step (will go to next in case that returns true)
  onnext: function(stepname, steppos) { return true },

  // Called *before* passing to the prev step (will go to next in case that returns true)
  onprev: function(stepname, steppos) { return true },   

  // Called when showing a step (if arrived clicking on "next" button, will be called *AFTER* onnext or onprev)  
  onstep: function(stepname, steppos) { return true },   

  // Called *before* accepting the end click (will execute the default behaviour of the command in case that returns true)  
  onend: function(stepname, steppos) { return true }, 

  // Called whenever the script "begin" is called     
  onbegin: function() { return true }, 


Easy Wizard Control In jQuery, form wizard bootstrap, jQuery Wizard Plugin/Github


See Demo And Download

Official Website(dealfonso): Click Here

This superior jQuery/javascript plugin is developed by dealfonso. For extra Advanced Usage, please go to the official website.

Related Posts


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…

Leave a Reply

Your email address will not be published. Required fields are marked *