Easy Sliding Toggle Switch Plugin For jQuery - C-Switch

File Size: 7.38 KB
Views Total: 2210
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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 id="demo" class="c_switch">
  <input type="checkbox" name="Switch-2" value='1'>

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.


5. Customize the toggle 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.