Skip to main content

Wizard

A series of html elements into sequential steps.

Wizard #1

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

Tell us about your dream
property and let us do the magic

We're so passionate about to help you to find the best
property to living. With our experience there is no doubt you'll
regret our service.

Get Started Next Step

HTML:

              
                <!-- 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/demo/real-estate/how-it-works-1.jpg" alt="Image Description">
                      </div>

                      <div class="col-md-6 pl-lg-9">
                        <h2 class="text-lh-xs mb-4">Tell us about your dream<br class="d-none d-lg-inline-block"> property and let us do the magic</h2>
                        <p class="mb-7">We're so passionate about to help you to find the best<br class="d-none d-lg-inline-block"> property to living. With our experience there is no doubt you'll<br class="d-none d-lg-inline-block"> regret our service.</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/demo/real-estate/how-it-works-2.jpg" alt="Image Description">
                      </div>

                      <div class="col-md-6 pl-lg-9">
                        <h2 class="text-lh-xs mb-4">Discuss with the owner</h2>
                        <p class="mb-7">We're so passionate about to help you to find the best<br class="d-none d-lg-inline-block"> property to living. With our experience there is no doubt you'll<br class="d-none d-lg-inline-block"> regret our service.</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/demo/real-estate/how-it-works-3.jpg" alt="Image Description">
                      </div>

                      <div class="col-md-6 pl-lg-9">
                        <h2 class="text-lh-xs mb-4">Make a deal</h2>
                        <p class="mb-7">We're so passionate about to help you to find the best<br class="d-none d-lg-inline-block"> property to living. With our experience there is no doubt you'll<br class="d-none d-lg-inline-block"> regret our service.</p>
                        <a class="btn btn-sm btn-primary mr-3" href="#">Get Started</a>
                      </div>
                    </div>
                  </div>
                  <!-- End Wizard Content -->
                </div>
                <!-- End Wizard -->

JS library and initialization:

            
              <!-- JS Space -->
              <script src="../../assets/js/components/hs.wizard.js"></script>

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