Skip to main content

Wizard

A series of html elements into sequential steps.

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.step-form.js plugin.

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

            
              <script src="../../assets/js/components/hs.wizard.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('ready', function () {
                  // initialization of wizard
                  $.HSCore.components.HSWizard.init('.js-wizard');
                });
              </script>

Basic example

1
Meet our agent
2
Discuss with the owner
3
Make a deal
Image Description

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, quaerat mollitia eligendi blanditiis consequatur placeat minima voluptates!

Get Started Next Step 
              
                <!-- Wizard -->
                <div class="js-wizard wizard"
                     data-wizard-steps="#wizardSteps"
                     data-wizard-content="#wizardContent">
                  <!-- Wizard Steps -->
                  <div id="wizardSteps" class="wizard-steps w-lg-80 mx-auto mb-9">
                    <div class="wizard-steps-item text-muted cursor-pointer"
                         data-next-step="#selectStepOne">
                      <div class="wizard-steps-num-wrapper">
                        <div class="wizard-steps-num shadow">
                          <div class="wizard-steps-num-inner">1</div>
                        </div>
                      </div>
                      <h5 class="wizard-steps-title d-none d-sm-block">Meet our agent</h5>
                    </div>

                    <div class="wizard-steps-item text-muted cursor-pointer"
                         data-next-step="#selectStepTwo">
                      <div class="wizard-steps-num-wrapper">
                        <div class="wizard-steps-num shadow">
                          <div class="wizard-steps-num-inner">2</div>
                        </div>
                      </div>
                      <h5 class="wizard-steps-title d-none d-sm-block">Discuss with the owner</h5>
                    </div>

                    <div class="wizard-steps-item text-muted cursor-pointer"
                         data-next-step="#selectStepThree">
                      <div class="wizard-steps-num-wrapper">
                        <div class="wizard-steps-num shadow">
                          <div class="wizard-steps-num-inner">3</div>
                        </div>
                      </div>
                      <h5 class="wizard-steps-title d-none d-sm-block">Make a deal</h5>
                    </div>
                  </div>
                  <!-- End Wizard Steps -->

                  <!-- Wizard Content -->
                  <div id="wizardContent">
                    <div id="selectStepOne" class="row align-items-lg-center active">
                      <div class="col-md-6 mb-4 mb-md-0">
                        <img class="img-fluid w-100 rounded" src="../assets/img/img41-lg.jpg" alt="Image Description">
                      </div>

                      <div class="col-md-6 pl-lg-4">
                        <h2 class="text-lh-xs mb-4">Title</h2>
                        <p class="mb-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, quaerat mollitia eligendi blanditiis consequatur placeat minima voluptates!</p>
                        <a class="btn btn-sm btn-primary mr-3" href="#">Get Started</a>
                        <a class="btn btn-sm btn-outline-primary border-1" href="javascript:;"
                            data-next-step="#selectStepTwo">
                          Next Step
                        </a>
                      </div>
                    </div>

                    <div id="selectStepTwo" class="row align-items-center" style="display: none;">
                      <div class="col-md-6 mb-4 mb-md-0">
                        <img class="img-fluid w-100 rounded" src="../assets/img/img41-lg.jpg" alt="Image Description">
                      </div>

                      <div class="col-md-6 pl-lg-9">
                        <h2 class="text-lh-xs mb-4">Title</h2>
                        <p class="mb-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, quaerat mollitia eligendi blanditiis consequatur placeat minima voluptates!</p>
                        <a class="btn btn-sm btn-primary mr-3" href="#">Get Started</a>
                        <a class="btn btn-sm btn-outline-primary border-1" href="javascript:;"
                            data-next-step="#selectStepThree">
                          Next Step
                        </a>
                      </div>
                    </div>

                    <div id="selectStepThree" class="row align-items-center" style="display: none;">
                      <div class="col-md-6 mb-4 mb-md-0">
                        <img class="img-fluid w-100 rounded" src="../assets/img/img41-lg.jpg" alt="Image Description">
                      </div>

                      <div class="col-md-6 pl-lg-9">
                        <h2 class="text-lh-xs mb-4">Title</h2>
                        <p class="mb-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, quaerat mollitia eligendi blanditiis consequatur placeat minima voluptates!</p>
                        <a class="btn btn-sm btn-primary mr-3" href="#">Get Started</a>
                      </div>
                    </div>
                  </div>
                  <!-- End Wizard Content -->
                </div>
                <!-- End Wizard -->

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-wizard-content="".

Attribute Description

data-wizard-steps

 The content container attribute which will be used to wrap all step headers.

data-wizard-content

 The content container attribute which will be used to wrap all step contents.

data-next-step

 Label for the next button.

data-previous-step

 Label for the previous button.