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

Preview
HTML

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