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
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 -->
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 |
|---|---|
|
|
The content container attribute which will be used to wrap all step headers. |
|
|
The content container attribute which will be used to wrap all step contents. |
|
|
Label for the next button. |
|
|
Label for the previous button. |