Question

I’m using the jQuery Form Wizard plugin to make a multi-stage form. Above my form I’m including a breadcrumb which will link to each stage of the form like so:

                <div id="secondaryNav" class="clearfix">
                    <ol class="breadcrumb">
                        <li id="step1"><a href="#"><span>Step 1</span></a></li>
                        <li id="step2"><a href="#"><span>Step 2</span></a></li>
                        <li id="step3"><a href="#"><span>Step 3</span></a></li>
                        <li id="step4"><a href="#"><span>Step 4</span></a></li>
                    </ol>
                </div>  

How can I make it so the breadcrumb links navigate to each section of the form whilst also adding an “active” class to the correct list item each time?

Answer 1

Use the back and next triggers.

For the “active” class you can use “step_shown” to check the current step each time a new step is shown and then use .addClass to add “active” to your element

🙂