Toggles

Introduction

Toggles are created using third party jquery plugin jQuery Toggles.

How to Setup

HTML Structure

<div class="toggle-wrap">
    <div class="toggle toggle-lg toggle-simple toggle-light toggle-bg-primary toggle1"></div>
    <div class="toggle toggle-simple toggle-light toggle-bg-primary toggle1"></div>
    <div class="toggle toggle-sm toggle-simple toggle-light toggle-bg-primary toggle1"></div>
</div>

Dependency

CSS

<!-- Toggles CSS -->
<link href="vendors/jquery-toggles/css/toggles.css" rel="stylesheet" type="text/css">
<link href="vendors/jquery-toggles/css/themes/toggles-light.css" rel="stylesheet" type="text/css">

JS

<!-- Toggles JavaScript -->
<script src="vendors/jquery-toggles/toggles.min.js"></script>
<script src="dist/js/toggle-data.js"></script>

Initialize Toggle js

/*Toggle Init*/
 
"use strict"; 
$('.toggle1').toggles({
	drag: true, // allow dragging the toggle between positions
	click: true, // allow clicking on the toggle
	text: {
	on: '', // text for the ON position
	off: '' // and off
	},
	on: true, // is the toggle ON on init
	animate: 250, // animation time (ms)
	easing: 'swing', // animation transition easing function
	checkbox: null, // the checkbox to toggle (for use in forms)
	clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
	
	type: 'compact' // if this is set to 'select' then the select style toggle will be used
});