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
});