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
<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-target="#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4, #customSwitch5, #customSwitch6, #customSwitch7, #customSwitch8, #customSwitch9"
data-slaves="#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-muted" href="javascript:;"
data-target="#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4">
<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="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-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="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
<label class="custom-control-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="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch3">
<label class="custom-control-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="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch4" checked>
<label class="custom-control-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-muted" href="javascript:;"
data-target="#customSwitch5, #customSwitch6, #customSwitch7, #customSwitch8, #customSwitch9">
<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="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input" id="customSwitch5" checked>
<label class="custom-control-label" for="customSwitch5">
<span class="d-block">Someone mentions me</span>
</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input" id="customSwitch6" checked>
<label class="custom-control-label" for="customSwitch6">
<span class="d-block">Anyone follows me</span>
</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input" id="customSwitch7">
<label class="custom-control-label" for="customSwitch7">
<span class="d-block">A member follows me</span>
</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input" id="customSwitch8" checked>
<label class="custom-control-label" for="customSwitch8">
<span class="d-block">Someone comments on one of my projects</span>
</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input" id="customSwitch9">
<label class="custom-control-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>
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 |
|---|---|
|
|
Checkboxes to which toggle is applied (this may not be necessarily an ID, it can be a class for a particular group of checkboxes). |
|
|
Must specify the buttons that's used in each separate section. |