Toggle Switch
Switch from one value to another.
How to use?
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.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 toggle switch
$('.js-toggle-switch').each(function () {
var toggleSwitch = new HSToggleSwitch($(this)).init();
});
});
</script>
Basic examples
Monthly
Annual
$
32
/ mon
$
54
/ mon
$
79
/ mon
<!-- Toggle Switch -->
<div class="d-flex justify-content-center align-items-center mb-5">
<span class="font-size-1 text-muted">Monthly</span>
<label class="toggle-switch mx-2" for="customSwitch">
<input type="checkbox" class="js-toggle-switch toggle-switch-input" id="customSwitch" checked
data-hs-toggle-switch-options='{
"targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
}'>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<span class="font-size-1 text-muted">Annual</span>
</div>
<!-- End Toggle Switch -->
<!-- Pricing Section -->
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<span class="d-block text-center">
<span class="text-dark align-top">$</span>
<span class="font-size-4 text-dark font-weight-bold mr-n2">
<span id="pricingCount1"
data-hs-toggle-switch-item-options='{
"min": 42,
"max": 32
}'>32</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<span class="d-block text-center">
<span class="text-dark align-top">$</span>
<span class="font-size-4 text-dark font-weight-bold mr-n2">
<span id="pricingCount2"
data-hs-toggle-switch-item-options='{
"min": 64,
"max": 54
}'>54</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<span class="d-block text-center">
<span class="text-dark align-top">$</span>
<span class="font-size-4 text-dark font-weight-bold mr-n2">
<span id="pricingCount3"
data-hs-toggle-switch-item-options='{
"min": 89,
"max": 79
}'>79</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
<!-- End Pricing -->
</div>
</div>
<!-- End Pricing Section -->
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of toggle state
$('.js-toggle-switch').each(function () {
var toggleSwitch = new HSToggleSwitch($(this)).init();
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-toggle-switch-options='{
...
}' - array
data-hs-toggle-switch-item-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-toggle-switch-options='{}'.
| Parameters | Description | Default value |
|---|---|---|
|
|
Selectors in which the text value will be changed from min to max with animation, for each element specified in the array. Essentially, count up/count down happens. |
undefined |
|
|
true is necessary to prepare a script for the correct processing of data, in those cases when the control element (entity), in the active (active) state. |
false |
|
|
Event that runs the script. | 'change' |
|
|
Default value for each item. | - |
|
|
Maximum value (to which count up will be carried out), for each item. | - |