Jquery Wizard Plugin

Jquery Wizard Plugin

After looking for a jquery plugin that will emulate a windows wizard I decided to make my own (with the help of cody lindley’s css step menu). I am using Jquery which can be found here and css step menu found here.

The code:

First we need a simple javascript function will hide and display a div, this method is used with jquery and you can learn how to use this here

function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");}

Next the html code, notice how each step is wrapped in the ID wizardwrapper and each div is assigned a class for the corresponding step number.



Step 1




Step 2




Step 3




Step 4




Step 5



A Demo of the wizard

  • steven riley
    June 5, 2007 at 1:23 pm

    Thanks nice job!

  • Ted Ellis
    July 15, 2007 at 3:01 pm

    Brilliant! Thank you so much!

  • Ted Ellis
    July 15, 2007 at 3:12 pm

    A further comment from me: if too much page text or photos are added then the step menu is forced downwards necessitating use of the scroll bar to see the menu.However I am sure that I can work around this somehow.Guys like yourself are invaluable time savers and very much appreciated!

  • Justin
    July 17, 2007 at 7:30 pm

    Press NEXT really fast. All the windows pop up. Need to have it set so when an animation is loading, nothing else can be clicked.

  • Jose Montiel
    August 7, 2007 at 11:49 pm


    About Justin comment you could try using LimitQueue.

    I haven’t try yet. I’ll let you know if it works for me.

    You can also wait for jQuery 1.2, I think this could help Queue Control

    Anyway, really nice. I’m already using it 😀


  • Will B.
    August 28, 2007 at 1:29 pm

    A small bug catch…you can’t click step 3 when you’re on step 5 and it go correctly, so I tried clicking the “back” button (in the form, not browser back), but I did it too quickly, repeatedly, and it messes the flow up a bit. But really nice, otherwise. Very excellent!

    Found you from AjaxRain.

  • startoy
    October 26, 2007 at 1:35 am

    there is also a large and comprehensive database of 800+ ajax scripts available with over at

    ajaxflakes’s ajax scripts compound

    thought i should add it might be helpful to others…


  • jerrymiah
    November 6, 2007 at 1:02 am

    one thing though bro..when i put some forms, the next button is not going to next..and also when u put it inside the div tag wrapper…the next button will not go to the next… 🙂

  • Ivan Vianna
    December 8, 2007 at 7:18 pm

    Nice job, preaty beautifull style.
    Where can I find the CSS style file?

  • ctraos
    January 28, 2008 at 10:48 am

    Exelente trabajo, muchas gracias

  • komik
    February 22, 2008 at 5:22 pm

    thank you

  • David Jacques-Louis
    February 23, 2008 at 7:06 am

    This is one I will use on my site.

  • ctraos
    March 7, 2008 at 11:28 am

    gracias muy buen trabajo

  • sumit
    April 16, 2008 at 10:28 pm

    really cool thank you

  • Shaiju
    May 25, 2008 at 3:36 am

    Thanks for this nice demonstration. It will be great if you add go-back functionality to Wizard link. So this will help users to navigate steps in between.

    Could you help to do that?

  • James
    May 28, 2008 at 7:08 am

    A fix for clicking fast is to change the div id to a class thateverything loads in or just dont click fast 😉

  • BuCzO
    June 19, 2008 at 6:23 am

    Hi, there is still problem when fast clicking next/back .I look at source and there is “function loadnext(divout,divin){$(”.” + divout).hide();$(”.” +divin).fadeIn(”fast”);}” like you suggested . Is there any way to repair this , i want to use this wizard in one of my project. Thanks.

  • Chuck
    July 15, 2008 at 5:48 am

    Nice concept but the page fails validation miserably due to all the duplicate IDs.

    This makes it impractical for real world use.

    Is there a way around this?


  • shopping cart
    July 15, 2008 at 7:49 am


    Thanks for such nice post.
    Where i can find the CSS file.

  • bedrijfskleding
    July 21, 2008 at 10:33 am

    yes where?

  • Jerod Santo
    August 9, 2008 at 7:24 pm


    I’m just writing to let y’all know that I enjoyed your idea for this jQuery wizard so much that I refactored it to eliminate redundancy, validate the markup, and dramatically reduce the LOC required.

    Let me know what you think! You can read more about it on this blog post

    -Jerod Santo

  • Rob
    August 11, 2008 at 11:09 am

    Inspired by your script I made one myself. It’s completely unobstrusive (no extra markup needed) and fully customizable.
    My Step-By-Step Wizard

  • Deepak
    September 23, 2008 at 2:58 am


    i just followed the procedure as mentioned and got the steps correctly, but i am getting the step boxes as rectangular not angled on right margins. how can i fix this ?

  • Melissa
    October 4, 2008 at 10:53 am

    You have an outstanding good and well structured site. I enjoyed browsing through it.I

  • Albert
    October 5, 2008 at 7:30 pm

    I enjoy your site very much! THANK YOU

  • lhuv
    October 12, 2008 at 3:26 am

    Your work is marvelous!!

  • kalsit
    November 18, 2008 at 9:14 am

    Could you please help me? I would really appreciate it.
    Thank you.

  • Ramesh
    November 27, 2008 at 5:12 am

    wizard control is working fine.
    But if I put dojo dialog control inside the steps, the dojo dialog control is not working.

    can you please help.

  • Nimesh – Perception System
    July 24, 2009 at 6:33 am

    Nice Post
    Informative & Useful One
    Thanks for great stuff

  • facebook
    February 15, 2013 at 10:32 am

    Pretty great pοst. Ι simply ѕtumbleԁ upon
    your blog anԁ wiѕhed to mention that I have truly еnjoyeԁ browsing your blog posts.

    Afteг all ӏ’ll be subscribing in your rss feed and I hope you write once more soon!

  • Udeh
    March 8, 2013 at 8:19 am


Post a Comment