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!

Answer 1

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.