Toggle State
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 example
<div class="d-flex justify-content-end mb-5">
<!-- Toggle Trigger -->
<button type="button" class="js-toggle-state u-toggle btn btn-sm u-btn-primary--air transition-3d-hover"
data-target="#checkboxSwitch1, #checkboxSwitch2, #checkboxSwitch3, #checkboxSwitch4, #checkboxSwitch5, #checkboxSwitch6, #checkboxSwitch7"
data-slaves="#toggleAll1, #toggleAll2">
<span class="u-toggle__default">Toggle all</span>
<span class="u-toggle__toggled">Untoggle all</span>
</button>
<!-- End Toggle Trigger -->
</div>
<div class="mb-9">
<!-- Toggle Trigger -->
<a id="toggleAll1" class="js-toggle-state d-lg-inline-block u-toggle u-link-muted" href="javascript:;"
data-target="#checkboxSwitch1, #checkboxSwitch2, #checkboxSwitch3, #checkboxSwitch4">
<span class="u-toggle__default">Toggle all</span>
<span class="u-toggle__toggled">Untoggle all</span>
</a>
<!-- End Toggle Trigger -->
<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="u-checkbox-switch mr-3">
<input type="checkbox" class="u-checkbox-switch__input" id="checkboxSwitch1">
<span class="u-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="u-checkbox-switch mr-3">
<input type="checkbox" class="u-checkbox-switch__input" id="checkboxSwitch2" checked>
<span class="u-checkbox-switch__slider"></span>
</label>
<label class="media-body text-muted mb-0" for="checkboxSwitch2">
<span class="d-block text-dark">Account activity</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="u-checkbox-switch mr-3">
<input type="checkbox" class="u-checkbox-switch__input" id="checkboxSwitch3">
<span class="u-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>
<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="u-checkbox-switch mr-3">
<input type="checkbox" class="u-checkbox-switch__input" id="checkboxSwitch4" checked>
<span class="u-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>
<!-- Toggle Trigger -->
<a id="toggleAll2" class="js-toggle-state u-toggle u-link-muted" href="javascript:;"
data-target="#checkboxSwitch5, #checkboxSwitch6, #checkboxSwitch7">
<span class="u-toggle__default">Toggle all</span>
<span class="u-toggle__toggled">Untoggle all</span>
</a>
<!-- End Toggle Trigger -->
<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="u-checkbox-switch mb-0 mr-3">
<input type="checkbox" class="u-checkbox-switch__input" id="checkboxSwitch5" checked>
<span class="u-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="u-checkbox-switch mb-0 mr-3">
<input type="checkbox" class="u-checkbox-switch__input" id="checkboxSwitch6" checked>
<span class="u-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="u-checkbox-switch mb-0 mr-3">
<input type="checkbox" class="u-checkbox-switch__input" id="checkboxSwitch7">
<span class="u-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 -->
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. |