Toggle State

Toggle from one value to another.

How to use?

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

<script src="../../assets/vendor/hs-toggle-state/dist/hs-toggle-state.min.js"></script>
Copy

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 state
    $('.js-toggle-state').each(function () {
      var toggleState = new HSToggleState($(this)).init();
    });
  });
</script>
Copy

Basic examples

Toggle all Untoggle all

My network

Toggle all Untoggle all
Send me:

Blueberry emails

Toggle all Untoggle all
Subscribe me to: 
<form>
  <!-- Button -->
  <div class="d-flex justify-content-end mb-3">
    <a class="js-toggle-state btn btn-sm btn-soft-primary transition-3d-hover" href="javascript:;"
       data-hs-toggle-state-options='{
         "targetSelector": "#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4, #customSwitch5, #customSwitch6, #customSwitch7, #customSwitch8, #customSwitch9",
         "slaveSelector": "#toggleAll1, #toggleAll2"
       }'>
      <span class="btn-toggle-default">Toggle all</span>
      <span class="btn-toggle-toggled">Untoggle all</span>
    </a>
  </div>
  <!-- End Button -->

  <!-- My Network -->
  <div class="mb-7">
    <!-- Title -->
    <div class="row justify-content-between align-items-end">
      <div class="col-6">
        <h2 class="h5 mb-0">My network</h2>
      </div>
      <div class="col-6 text-right">
        <a id="toggleAll1" class="js-toggle-state link-underline" href="javascript:;"
           data-hs-toggle-state-options='{
             "targetSelector": "#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4"
           }'>
          <span class="link-underline-toggle-default">Toggle all</span>
          <span class="link-underline-toggle-toggled">Untoggle all</span>
        </a>
      </div>
    </div>
    <!-- End Title -->

    <hr class="mt-2 mb-4">

    <div class="mb-3">
      <h3 class="small text-muted">Send me:</h3>
    </div>

    <!-- Checkbox Switch -->
    <div class="toggle-switch">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch1">
      <label class="toggle-switch-label" for="customSwitch1">
        <span class="d-block">New for you</span>
        <small class="d-block text-muted">A weekly email featuring shots from designers you follow</small>
      </label>
    </div>
    <!-- End Checkbox Switch -->

    <hr class="my-3">

    <!-- Checkbox Switch -->
    <div class="toggle-switch">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch2" checked>
      <label class="toggle-switch-label" for="customSwitch2">
        <span class="d-block">Account activity <span class="badge badge-success ml-1">New</span></span>
        <small class="d-block text-muted">Get important notifications about you or activity you've missed</small>
      </label>
    </div>
    <!-- End Checkbox Switch -->

    <hr class="my-3">

    <!-- Checkbox Switch -->
    <div class="toggle-switch">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch3">
      <label class="toggle-switch-label" for="customSwitch3">
        <span class="d-block">Meetups near you <span class="badge badge-success ml-1">New</span></span>
        <small class="d-block text-muted">Get an email when a Dribbble Meetup is posted close to my location</small>
      </label>
    </div>
    <!-- End Checkbox Switch -->

    <hr class="my-3">

    <!-- Checkbox Switch -->
    <div class="toggle-switch">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch4" checked>
      <label class="toggle-switch-label" for="customSwitch4">
        <span class="d-block">Opportunities</span>
        <small class="d-block text-muted">Get a daily email when new design jobs are posted in your area</small>
      </label>
    </div>
    <!-- End Checkbox Switch -->
  </div>
  <!-- End My Network -->

  <!-- Account Activity -->
  <div class="mb-7">
    <!-- Title -->
    <div class="row justify-content-between align-items-end">
      <div class="col-6">
        <h2 class="h5 mb-0">Account activity</h2>
      </div>
      <div class="col-6 text-right">
        <a id="toggleAll2" class="js-toggle-state link-underline" href="javascript:;"
           data-hs-toggle-state-options='{
             "targetSelector": "#customSwitch5, #customSwitch6, #customSwitch7, #customSwitch8, #customSwitch9"
           }'>
          <span class="link-underline-toggle-default">Toggle all</span>
          <span class="link-underline-toggle-toggled">Untoggle all</span>
        </a>
      </div>
    </div>
    <!-- End Title -->

    <hr class="mt-2 mb-4">

    <div class="mb-3">
      <h3 class="small text-muted">Email me when:</h3>
    </div>

    <!-- Checkbox Switch -->
    <div class="toggle-switch mb-3">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch5" checked>
      <label class="toggle-switch-label" for="customSwitch5">
        <span class="d-block">Someone mentions me</span>
      </label>
    </div>
    <!-- End Checkbox Switch -->

    <!-- Checkbox Switch -->
    <div class="toggle-switch mb-3">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch6" checked>
      <label class="toggle-switch-label" for="customSwitch6">
        <span class="d-block">Anyone follows me</span>
      </label>
    </div>
    <!-- End Checkbox Switch -->

    <!-- Checkbox Switch -->
    <div class="toggle-switch mb-3">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch7">
      <label class="toggle-switch-label" for="customSwitch7">
        <span class="d-block">A member follows me</span>
      </label>
    </div>
    <!-- End Checkbox Switch -->

    <!-- Checkbox Switch -->
    <div class="toggle-switch mb-3">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch8" checked>
      <label class="toggle-switch-label" for="customSwitch8">
        <span class="d-block">Someone comments on one of my projects</span>
      </label>
    </div>
    <!-- End Checkbox Switch -->

    <!-- Checkbox Switch -->
    <div class="toggle-switch mb-3">
      <input type="checkbox" class="toggle-switch-input" id="customSwitch9">
      <label class="toggle-switch-label" for="customSwitch9">
        <span class="d-block">Someone comments on one of my tasks</span>
      </label>
    </div>
    <!-- End Checkbox Switch -->
  </div>
  <!-- End Account Activity -->
</form>
Copy

JavaScript behavior

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-state').each(function () {
      var toggleState = new HSToggleState($(this)).init();
    });
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin: 

data-hs-toggle-state-options='{
   ...
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-toggle-state-options='{}'.

Parameters Description Default value

targetSelector

Selectors whose state changes depending on the current state (checked/unchecked) null

classMap.toggle

Toggle class that is given/removed to an invoker classMap: { toggle: 'toggled' }
Logo

Developed by Nasim Mahmud's team | Blueberry Framework · Powered by Nimusoft

© Blueberry. 2020 Nimusoft. All rights reserved.