iPhone Style Toggle Switch With jQuery And CSS3 - Sswitch

Sswitch is a very lightweight (~3kb unminified) jQuery plugin which allows to replace the normal checkbox input with an iPhone style on/off toggle switch.

The plugin uses CSS3 animations for the smooth sliding effect.

How to use it:

1. To get started, you need to load the required style sheet in the header of the html page.

<link rel="stylesheet" href="css/style.css">

2. Create a checkbox for the switch.

<input type="checkbox" name="checkboxName" class="checkbox">

3. Load jQuery library and the main JS file Sswitch.js right before the closing body tag.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/Sswitch.js"></script>

4. Invoke the plugin on the checkbox and done.

$(".checkbox").Sswitch();

5. Execute a callback when the switch changes state.

$(".checkbox").Sswitch({
  onSwitchChange: function() {
    // Your magic
  }
});

---

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