iPhone Style Toggle Switch With jQuery And CSS3 - Sswitch

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


5. Execute a callback when the switch changes state.

  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.