Toggle State

It is for switching from one setting to another with the help of stylish toggle.js

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 plugin.

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

            
              <script src="../../assets/js/helpers/hs.toggle-state.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 state
                  $.HSCore.components.HSToggleState.init('.js-toggle-state');
                });
              </script>
            
          

Basic examples


Send me:




Account activity


Email me when:

                  
                    <!-- 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-target="#checkboxSwitch1, #checkboxSwitch2, #checkboxSwitch3, #checkboxSwitch4, #checkboxSwitch5, #checkboxSwitch6, #checkboxSwitch7, #checkboxSwitch8, #checkboxSwitch9"
                         data-slaves="#toggleAll1, #toggleAll2">
                        <span class="btn__toggle-default">Toggle all</span>
                        <span class="btn__toggle-toggled">Untoggle all</span>
                      </a>
                    </div>
                    <!-- End Button -->

                    <form>
                      <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-muted" href="javascript:;"
                               data-target="#checkboxSwitch1, #checkboxSwitch2, #checkboxSwitch3, #checkboxSwitch4">
                              <span class="link-muted__toggle-default">Toggle all</span>
                              <span class="link-muted__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="media align-items-center">
                          <label class="checkbox-switch mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch1">
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch1">
                            <span class="d-block text-dark">New for you</span>
                            <small class="d-block">A weekly email featuring shots from designers you follow</small>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <hr class="my-3">

                        <!-- Checkbox Switch -->
                        <div class="media align-items-center">
                          <label class="checkbox-switch mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch2" checked>
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch2">
                            <span class="d-block text-dark">Account activity <span class="badge badge-success ml-1">New</span></span>
                            <small class="d-block">Get important notifications about you or activity you've missed</small>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <hr class="my-3">

                        <!-- Checkbox Switch -->
                        <div class="media align-items-center">
                          <label class="checkbox-switch mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch3">
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch3">
                            <span class="d-block text-dark">Meetups near you <span class="badge badge-success ml-1">New</span></span>
                            <small class="d-block">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="media align-items-center">
                          <label class="checkbox-switch mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch4" checked>
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch4">
                            <span class="d-block text-dark">Opportunities</span>
                            <small class="d-block">Get a daily email when new design jobs are posted in your area</small>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->
                      </div>

                      <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-muted" href="javascript:;"
                               data-target="#checkboxSwitch5, #checkboxSwitch6, #checkboxSwitch7, #checkboxSwitch8, #checkboxSwitch9">
                              <span class="link-muted__toggle-default">Toggle all</span>
                              <span class="link-muted__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="media align-items-center mb-3">
                          <label class="checkbox-switch mb-0 mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch5" checked>
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch5">
                            <span class="d-block text-dark">Someone mentions me</span>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <!-- Checkbox Switch -->
                        <div class="media align-items-center mb-3">
                          <label class="checkbox-switch mb-0 mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch6" checked>
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch6">
                            <span class="d-block text-dark">Anyone follows me</span>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <!-- Checkbox Switch -->
                        <div class="media align-items-center mb-3">
                          <label class="checkbox-switch mb-0 mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch7">
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch7">
                            <span class="d-block text-dark">A member follows me</span>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <!-- Checkbox Switch -->
                        <div class="media align-items-center mb-3">
                          <label class="checkbox-switch mb-0 mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch8" checked>
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch8">
                            <span class="d-block text-dark">Someone comments on one of my projects</span>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <!-- Checkbox Switch -->
                        <div class="media align-items-center mb-3">
                          <label class="checkbox-switch mb-0 mr-3">
                            <input type="checkbox" class="checkbox-switch__input" id="checkboxSwitch9">
                            <span class="checkbox-switch__slider"></span>
                          </label>
                          <label class="media-body text-muted mb-0" for="checkboxSwitch9">
                            <span class="d-block text-dark">Someone comments on one of my tasks</span>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->
                      </div>
                    </form>
                  
                

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-target="".

Attribute Description

data-target

Checkboxes to which toggle is applied (this may not be necessarily an ID, it can be a class for a particular group of checkboxes).

data-slaves

Must specify the buttons that's used in each separate section.