Logo v4.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Spinners
  • Steps
  • Tab
  • Tables
  • Text Highlight
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Input Mask
  • Step Forms (Wizards)
  • Range Slider (noUiSlider)
  • Add Field
  • Toggle Password
  • Count Characters
  • Toggle Switch
  • Toggle State
  • Switch
  • Media
  • Fullscreen Lightbox
  • Video Background
  • Video Player
  • Swiper
  • Others
  • Maps (Leaflet)
  • Chart.js
  • Circles.js (Pie Chart)
  • Sticky Block
  • Countdown
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typed.js
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Rotations
  • Shadows
  • Sizing
  • Spacing
  • Z-index

Toggle State

Toggle from one value to another.

How to use

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

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

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF TOGGLE STATE
              // =======================================================
              new HSToggleState('.js-toggle-state')
            })()
          </script>
        
      

Basic example

  • Preview
  • HTML
My network
Toggle all Untoggle all
We need permission from your browser to show notifications. Request permission
Send me:
Front emails
Toggle all Untoggle all
Subscribe me to:
Usage
Toggle all Untoggle all
Allow others to:
Turn all notifications on or off:
Turn OFF Turn ON
              
                <!-- Card -->
                <div class="card card-sm mb-3 mb-lg-5">
                  <!-- Header -->
                  <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                    <h5 class="card-header-title">My network</h5>

                    <a id="toggleAll1" class="js-toggle-state btn btn-white btn-sm btn-toggle" href="javascript:;"
                       data-hs-toggle-state-options='{
                         "targetSelector": "#accountNotificationSwitch1, #accountNotificationSwitch2, #accountNotificationSwitch3, #accountNotificationSwitch4"
                       }'>
                      <span class="btn-toggle-default">Toggle all</span>
                      <span class="btn-toggle-toggled">Untoggle all</span>
                    </a>
                  </div>
                  <!-- End Header -->

                  <!-- Alert -->
                  <div class="alert alert-soft-danger text-center card-alert" role="alert">
                    We need permission from your browser to show notifications. <a class="alert-link" href="#">Request permission</a>
                  </div>
                  <!-- End Alert -->

                  <div class="card-body">
                    <small class="card-subtitle">Send me:</small>

                    <!-- List Group -->
                    <div class="list-group list-group-flush list-group-no-gutters">
                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch1">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch1">
                          <span class="d-block">New for you</span>
                          <span class="d-block small text-muted">A weekly email featuring shots from designers you follow</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->

                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch2">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch2" checked>
                          <span class="d-block">Account activity <span class="badge bg-success ms-1">New</span></span>
                          <span class="d-block small text-muted">Get important notifications about you or activity you've missed</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->

                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch3">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch3" checked>
                          <span class="d-block">Meetups near you <span class="badge bg-success ms-1">New</span></span>
                          <span class="d-block small text-muted">Get an email when a Dribbble Meetup is posted close to my location</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->

                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch4">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch4">
                          <span class="d-block">Opportunities</span>
                          <span class="d-block small text-muted">Get a daily email when new design jobs are posted in your area</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->
                    </div>
                    <!-- End List Group -->
                  </div>
                </div>
                <!-- End Card -->

                <!-- Card -->
                <div class="card card-sm mb-3 mb-lg-5">
                  <!-- Header -->
                  <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                    <h5 class="card-header-title">Front emails</h5>

                    <a id="toggleAll3" class="js-toggle-state btn btn-white btn-sm btn-toggle" href="javascript:;"
                       data-hs-toggle-state-options='{
                         "targetSelector": "#accountNotificationSwitch5, #accountNotificationSwitch6, #accountNotificationSwitch7, #accountNotificationSwitch8"
                       }'>
                      <span class="btn-toggle-default">Toggle all</span>
                      <span class="btn-toggle-toggled">Untoggle all</span>
                    </a>
                  </div>
                  <!-- End Header -->

                  <div class="card-body">
                    <small class="card-subtitle">Subscribe me to:</small>

                    <!-- List Group -->
                    <div class="list-group list-group-flush list-group-no-gutters">
                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch5">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch5" checked>
                          <span class="d-block">Company news</span>
                          <span class="d-block small text-muted">Get Front news, announcements, and product updates</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->

                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch6">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch6">
                          <span class="d-block">Replay <span class="badge bg-success ms-1">New</span></span>
                          <span class="d-block small text-muted">A weekly email featuring popular shots</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->

                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch7">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch7">
                          <span class="d-block">Courtside <span class="badge bg-success ms-1">New</span></span>
                          <span class="d-block small text-muted">A weekly email featuring the latest stories from our blog</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->

                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch8">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch8">
                          <span class="d-block">Weekly jobs</span>
                          <span class="d-block small text-muted">Weekly digest of design jobs</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->
                    </div>
                    <!-- End List Group -->
                  </div>
                </div>
                <!-- End Card -->

                <!-- Card -->
                <div class="card card-sm mb-3 mb-lg-5">
                  <!-- Header -->
                  <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                    <h5 class="card-header-title">Usage</h5>

                    <a id="toggleAll4" class="js-toggle-state btn btn-white btn-sm btn-toggle" href="javascript:;"
                       data-hs-toggle-state-options='{
                         "targetSelector": "#accountNotificationSwitch9, #accountNotificationSwitch10, #accountNotificationSwitch11"
                       }'>
                      <span class="btn-toggle-default">Toggle all</span>
                      <span class="btn-toggle-toggled">Untoggle all</span>
                    </a>
                  </div>
                  <!-- End Header -->

                  <div class="card-body">
                    <small class="card-subtitle">Allow others to:</small>

                    <!-- List Group -->
                    <div class="list-group list-group-flush list-group-no-gutters">
                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch9">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch9">
                          <span class="d-block">Encrypt data</span>
                          <span class="d-block small text-muted">Encrypt all data associated with account</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->

                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch10">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch10" checked>
                          <span class="d-block">Location services</span>
                          <span class="d-block small text-muted">Allow third-party apps to use current location</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->

                      <!-- Item -->
                      <div class="list-group-item">
                        <!-- Form Switch -->
                        <label class="form-check form-switch" for="accountNotificationSwitch11">
                          <input class="form-check-input mt-0" type="checkbox" id="accountNotificationSwitch11">
                          <span class="d-block">Allow private notes</span>
                          <span class="d-block small text-muted">Members can send you private notes</span>
                        </label>
                        <!-- End Form Switch -->
                      </div>
                      <!-- End Item -->
                    </div>
                    <!-- End List Group -->
                  </div>
                </div>
                <!-- End Card -->

                <!-- Toggle Button -->
                <div class="d-sm-flex justify-content-between align-items-center">
                  <div class="mb-3 mb-sm-0">
                    <small class="card-subtitle">Turn all notifications on or off:</small>
                  </div>

                  <a class="js-toggle-state btn btn-primary btn-sm btn-toggle" href="javascript:;"
                     data-hs-toggle-state-options='{
                       "targetSelector": "#accountNotificationSwitch1, #accountNotificationSwitch2, #accountNotificationSwitch3, #accountNotificationSwitch4, #accountNotificationSwitch5, #accountNotificationSwitch6, #accountNotificationSwitch7, #accountNotificationSwitch8, #accountNotificationSwitch9, #accountNotificationSwitch10, #accountNotificationSwitch11",
                       "slaveSelector": "#toggleAll1, #toggleAll2, #toggleAll3, #toggleAll4"
                     }'>
                    <span class="btn-toggle-default">
                      <i class="bi-toggle-off me-1"></i> Turn OFF
                    </span>
                    <span class="btn-toggle-toggled">
                      <i class="bi-toggle-on me-1"></i> Turn ON
                    </span>
                  </a>
                </div>
                <!-- End Toggle Button -->
              
            

Modal example

  • Preview
  • HTML
Toggle State
My network
Toggle all Untoggle all
We need permission from your browser to show notifications. Request permission
Send me:
Front emails
Toggle all Untoggle all
Subscribe me to:
Usage
Toggle all Untoggle all
Allow others to:
Turn all notifications on or off:
Turn OFF Turn ON
              
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Toggle State</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>

                      <div class="modal-body">
                        <form>
                          <!-- Card -->
                          <div class="card card-sm mb-3 mb-lg-5">
                            <!-- Header -->
                            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                              <h5 class="card-header-title">My network</h5>

                              <a id="toggleAllModal1" class="js-toggle-state btn btn-white btn-sm btn-toggle" href="javascript:;"
                                 data-hs-toggle-state-options='{
                                   "targetSelector": "#accountNotificationModalSwitch1, #accountNotificationModalSwitch2, #accountNotificationModalSwitch3, #accountNotificationModalSwitch4"
                                 }'>
                                <span class="btn-toggle-default">Toggle all</span>
                                <span class="btn-toggle-toggled">Untoggle all</span>
                              </a>
                            </div>
                            <!-- End Header -->

                            <!-- Alert -->
                            <div class="alert alert-soft-danger text-center card-alert" role="alert">
                              We need permission from your browser to show notifications. <a class="alert-link" href="#">Request permission</a>
                            </div>
                            <!-- End Alert -->

                            <div class="card-body">
                              <small class="card-subtitle">Send me:</small>

                              <!-- List Group -->
                              <div class="list-group list-group-flush list-group-no-gutters">
                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch1">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch1">
                                    <span class="d-block">New for you</span>
                                    <span class="d-block small text-muted">A weekly email featuring shots from designers you follow</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->

                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch2">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch2" checked>
                                    <span class="d-block">Account activity <span class="badge bg-success ms-1">New</span></span>
                                    <span class="d-block small text-muted">Get important notifications about you or activity you've missed</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->

                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch3">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch3" checked>
                                    <span class="d-block">Meetups near you <span class="badge bg-success ms-1">New</span></span>
                                    <span class="d-block small text-muted">Get an email when a Dribbble Meetup is posted close to my location</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->

                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch4">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch4">
                                    <span class="d-block">Opportunities</span>
                                    <span class="d-block small text-muted">Get a daily email when new design jobs are posted in your area</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->
                              </div>
                              <!-- End List Group -->
                            </div>
                          </div>
                          <!-- End Card -->

                          <!-- Card -->
                          <div class="card card-sm mb-3 mb-lg-5">
                            <!-- Header -->
                            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                              <h5 class="card-header-title">Front emails</h5>

                              <a id="toggleAllModal3" class="js-toggle-state btn btn-white btn-sm btn-toggle" href="javascript:;"
                                 data-hs-toggle-state-options='{
                                   "targetSelector": "#accountNotificationModalSwitch5, #accountNotificationModalSwitch6, #accountNotificationModalSwitch7, #accountNotificationModalSwitch8"
                                 }'>
                                <span class="btn-toggle-default">Toggle all</span>
                                <span class="btn-toggle-toggled">Untoggle all</span>
                              </a>
                            </div>
                            <!-- End Header -->

                            <div class="card-body">
                              <small class="card-subtitle">Subscribe me to:</small>

                              <!-- List Group -->
                              <div class="list-group list-group-flush list-group-no-gutters">
                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch5">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch5" checked>
                                    <span class="d-block">Company news</span>
                                    <span class="d-block small text-muted">Get Front news, announcements, and product updates</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->

                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch6">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch6">
                                    <span class="d-block">Replay <span class="badge bg-success ms-1">New</span></span>
                                    <span class="d-block small text-muted">A weekly email featuring popular shots</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->

                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch7">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch7">
                                    <span class="d-block">Courtside <span class="badge bg-success ms-1">New</span></span>
                                    <span class="d-block small text-muted">A weekly email featuring the latest stories from our blog</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->

                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch8">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch8">
                                    <span class="d-block">Weekly jobs</span>
                                    <span class="d-block small text-muted">Weekly digest of design jobs</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->
                              </div>
                              <!-- End List Group -->
                            </div>
                          </div>
                          <!-- End Card -->

                          <!-- Card -->
                          <div class="card card-sm mb-3 mb-lg-5">
                            <!-- Header -->
                            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                              <h5 class="card-header-title">Usage</h5>

                              <a id="toggleAllModal4" class="js-toggle-state btn btn-white btn-sm btn-toggle" href="javascript:;"
                                 data-hs-toggle-state-options='{
                                   "targetSelector": "#accountNotificationModalSwitch9, #accountNotificationModalSwitch10, #accountNotificationModalSwitch11"
                                 }'>
                                <span class="btn-toggle-default">Toggle all</span>
                                <span class="btn-toggle-toggled">Untoggle all</span>
                              </a>
                            </div>
                            <!-- End Header -->

                            <div class="card-body">
                              <small class="card-subtitle">Allow others to:</small>

                              <!-- List Group -->
                              <div class="list-group list-group-flush list-group-no-gutters">
                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch9">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch9">
                                    <span class="d-block">Encrypt data</span>
                                    <span class="d-block small text-muted">Encrypt all data associated with account</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->

                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch10">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch10" checked>
                                    <span class="d-block">Location services</span>
                                    <span class="d-block small text-muted">Allow third-party apps to use current location</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->

                                <!-- Item -->
                                <div class="list-group-item">
                                  <!-- Form Switch -->
                                  <label class="form-check form-switch" for="accountNotificationModalSwitch11">
                                    <input class="form-check-input mt-0" type="checkbox" id="accountNotificationModalSwitch11">
                                    <span class="d-block">Allow private notes</span>
                                    <span class="d-block small text-muted">Members can send you private notes</span>
                                  </label>
                                  <!-- End Form Switch -->
                                </div>
                                <!-- End Item -->
                              </div>
                              <!-- End List Group -->
                            </div>
                          </div>
                          <!-- End Card -->

                          <!-- Toggle Button -->
                          <div class="d-sm-flex justify-content-between align-items-center">
                            <div class="mb-3 mb-sm-0">
                              <small class="card-subtitle">Turn all notifications on or off:</small>
                            </div>

                            <a class="js-toggle-state btn btn-primary btn-sm btn-toggle" href="javascript:;"
                               data-hs-toggle-state-options='{
                                 "targetSelector": "#accountNotificationModalSwitch1, #accountNotificationModalSwitch2, #accountNotificationModalSwitch3, #accountNotificationModalSwitch4, #accountNotificationModalSwitch5, #accountNotificationModalSwitch6, #accountNotificationModalSwitch7, #accountNotificationModalSwitch8, #accountNotificationModalSwitch9, #accountNotificationModalSwitch10, #accountNotificationModalSwitch11",
                                 "slaveSelector": "#toggleAllModal1, #toggleAllModal2, #toggleAllModal3, #toggleAllModal4"
                               }'>
                              <span class="btn-toggle-default">
                                <i class="bi-toggle-off me-1"></i> Turn OFF
                              </span>
                              <span class="btn-toggle-toggled">
                                <i class="bi-toggle-on me-1"></i> Turn ON
                              </span>
                            </a>
                          </div>
                          <!-- End Toggle Button -->
                        </form>
                      </div>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Modal -->
              
            

Methods

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' }