Toggle

PS
Last updated 2 months ago

These are powered by Switchery jQuery plugin. Follow these steps to initialize a sliding toggle in your page

Please refer to Switchery Documentation to learn about plugin options

Step one

Include the stylesheet switchery.min.css inside the <head>.

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/switchery/css/switchery.min.css">

Step two

Include the required javascript files inside the <body> before core template script inclusions.

<script type="text/javascript" src="assets/plugins/switchery/js/switchery.min.js"></script>

Step three

Create an ordinary checkbox control with a unique classname

<input type="checkbox" class="switchery" checked />
<input type="checkbox" class="switchery" />

Step four

Apply the plugin to your desired element

When initializing the plugin, it is recommended that you only use the hex codes of Pages contextual colors to maintain consistency.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

<script>
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
// Success color: #10CFBD
elems.forEach(function(html) {
var switchery = new Switchery(html, {color: '#10CFBD'});
});
</script>