Basic jquery Steps Wizard

Question

Been trying to do this for a while now, but it seems all jquery steps/wizard plugins are very limited and was hoping you guys are able to help me out a little.

What i'm trying to do is a very basic 3 steps wizard via jQuery. So at beginning it only shows the .step-active and .content-active at first and then 2 and then 3 where i submit the form.

Here is my HTML:

<div class="steps-wizard">
<div class="step1 step-active">1</div>
<div class="step2">2</div>
<div class="step3">3</div>
</div>

<form id="steps-form">
<div class="steps-content">
<!-- STEP 1 -->
<div class="step1-content content-active">
    -- CONTENT --
    <a href="#">Next</a>
</div>

<!-- STEP 2 -->
<div class="step2-content">
    -- CONTENT --
    <a href="#">Next</a>
</div>

<!-- STEP 3 -->
<div class="step3-content">
    -- CONTENT --
    <input type="submit">Submit</a>
</div>

Any help on this would be very much appreciated as it seems i'm not able to get this working correctly...

Thanks guys!

This is effectively just tabbed content, which has plenty of tutorials online or many plugins available from a quick google search — seemly, Jul 10 '13 at 13:12
Yes, but i haven't found any that switches tabs with a click of a button and be able to go back... — Jack Johnson, Jul 10 '13 at 13:16
@Mazzon, first you should format your HTML properly, to avoid possible problems... do you want navigation to work on upper buttons (1,2,3) and, also on 'next' links? You've mentioned that you want to 'go back' - so, i guess that you need 'prev/next' functionality? — sinisake, Jul 10 '13 at 13:19
Simple CSS Steps Wizard: https://github.com/shahzadthathal/css-steps-wizard — Muhammad Shahzad, Mar 10 '20 at 07:15

Rafael Staib · Answer 1 · 2013-09-24T13:03:25.407

Yes, it applies to many wizard plugins but not to jQuery Steps. jQuery Steps is a very powerful and feature-rich wizard plugin. There are plenty of CSS classes you can use to customize the control like you want. Each step consists of one step button, a step title (which is hidden by default) and a step panel for the content. In your case you have to override just two CSS classes (see the following CSS snippet).

/* First hide all steps from the begining on */
.wizard > .steps li
{
    display: none;
}

/* Then just re-show only the current step */
.wizard > .steps li.current
{
    display: block;
}

A running demo you find here.

For more information and examples go here.

For a more advanced form wizard implementation go here. There you will learn how to plug jQuery Steps and jQuery Validation together.

score 1 · Answer 2 · edited Dec 31 '16 at 14:10

I used your HTML code. I added numbers to --CONTENT-- to see what's going on, and added 2 lines of CSS to hide inactive <div>s, but I don't think you really need classes like step3-content.

$(document).ready(function() {
    $('a').click(function(e) {
        // this prevents page reload after clicking <a> 
        e.preventDefault();
        // parent: exact <div> with <a> you just clicked, grandpa: all content <div>s, index: next <div> index
        var parent = $(this).parent('div'), grandpa = $('.steps-content>div'), index = grandpa.index(parent)+1;
        // remove active class from current <div>
        parent.removeClass('content-active');
        // set it to next div
        grandpa.eq(index).addClass('content-active');
        // another way to do the same, but using 1 line and children() instead of '>'
        $('.steps-wizard').children('div').removeClass('step-active').eq(index).addClass('step-active');
    });
    // that's it
});

score 0 · Answer 3 · answered Jul 10 '13 at 13:33

0

I think you want something like this:

http://jsbin.com/egidod/1/

I hope this will help you.

I have only made a simple tab plugin. It uses Jquery UI.

answered Jul 10 '13 at 13:33

NETCreator Hosting - WebDesign

6,886
3
23
43

score 0 · Answer 4 · answered Sep 24 '13 at 13:13

0

I use JQuery plugin Smart Wizard and it works perfectly. The implementation is very simple. Follow the link to an example and documentation:

https://github.com/mstratman/jQuery-Smart-Wizard

answered Sep 24 '13 at 13:13

Renato Vianna

138
2
10

Basic jquery Steps Wizard

4 Answers4