Easy Sliding Toggle Switch Plugin For jQuery - C-Switch

C-Switch is an easy yet customizable jQuery plugin which converts radio or checkbox inputs into more efficient sliding toggle switches. The plugin is licensed under the Apache License, Version 2.0.

Features:

• CSS3 based smooth animations.
• Custom text for on/off states.
• Custom CSS styles.

How to use it:

1. Put the CSS in the head section of your HTML document.

<link href="c-switch.css" rel="stylesheet">

2. Create radio buttons or checkboxes for the toggle switches.

<div id="demo" class="c_switch">
  <input type="radio" name="activate" value='yes'>
  <input type="radio" name="activate" value='no'>
</div>

<div id="demo" class="c_switch">
  <input type="checkbox" name="Switch-2" value='1'>
</div>

3. Put jQuery library and the JavaScript file c-switch.js at the end of your HTML document.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="c-switch.js"></script>

4. Call the function to generate a default toggle switch.

$('#demo').c_switch();

5. Customize the toggle switch.

$('#demo').c_switch({
  test: false, // test mode
  style: 'square', // or 'round'
  id: 'c_element',
  switch_color_on: '#008000',
  switch_color_off: '#444444',
  switch_class: '',
  switch_class_on: '',
  switch_class_off: '',
  background_color_on: 'transparent',
  background_color_off: 'transparent',
  background_border: '1px solid ',
  background_border_color_on: '#CCCCCC',
  background_border_color_off: '#CCCCCC',
  background_width: 40,
  background_height: 20,
  background_margin: 2,
  background_class: '',
  background_class_on: '',
  background_class_off: '',
  text_on: 'On',
  text_off: 'Off',
  duration: 500, // animation duration
  animation: 'ease', // CSS3 easing
  zoom: 1 // zoom level
});

---

This awesome jQuery plugin is developed by maurobaptista. For more Advanced Usages, please check the demo page or visit the official website.