> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/forms/toggles.md).

# Toggles

## Introduction

Toggles are created using third party jquery plugin [jQuery Toggles](https://github.com/simontabor/jquery-toggles).

![](/files/-LRk3SLbxE5UXT8rznvO)

## How to Setup

### **HTML Structure**

```markup
<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

```markup
<!-- 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

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

```

### Initialize Toggle js

```javascript
/*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
});
```

## &#x20;