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
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
Toggle State
<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 |
|---|---|---|
|
|
Selectors whose state changes depending on the current state (checked/unchecked) | null |
|
|
Toggle class that is given/removed to an invoker | classMap: { toggle: 'toggled' } |