Wizards

Basic Wizard Markup

The Wizards element in Stack uses the jQuery Steps plugin. This plugin offers advanced wizard functionality and is ideal for developers who require multi-part onboarding, signup, tutorial processes and more.

Included here is a basic example of how to create a Wizard on your page. For more advanced examples, including form validation, see the plugin examples here: jQuery Steps by Rafael Staib

The basic layout for the Wizard requires parent .wizard element which houses <h5> elements that serve as the title for each panel in the wizard and <section> elements which house the content for each panel. This is demonstrated in the markup snippet below:

<div class="wizard">
    <h5>Panel Title</h5>
    <section>
    	... Panel Content ...
    </section>
    <h5>Panel Title</h5>
    <section>
    	... Panel Content ...
    </section>
    <h5>Panel Title</h5>
    <section>
    	... Panel Content ...
    </section>
</div>