Simple Plain Toggle Button Plugin For jQuery - miniToggle.js

miniToggle.js is a lightweight jQuery plugin which transforms normal DIV element into an iOS-style smooth toggle button (switch) with variable colors and toggle event supports. Basic on CSS3 transitions and transforms.

Browser support: IE8+, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser. 

How to use it:

1. Create an empty DIV element for the iOS-style toggle button.

<div class="toggle"></div>

2. Load the jQuery miniToggle.js plugin and other required resources in the html document.

<link rel="stylesheet" href="minitoggle.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="minitoggle.js"></script>

3. Initialize the jQuery miniToggle.js plugin.

$('.toggle').minitoggle();

4. This will transforms the DIV element into a basic toggle button:

<div class="toggle">
  <div class="minitoggle">
    <div class="toggle-handle"></div>
  </div>
</div>

5. Set the initial state of the toggle button.

$('.toggle').minitoggle({
  on: false // or true
});

6. Perform some cool stuffs as you toggle the toggle button.

$('.toggle').on("toggle", function(e){
  if (e.isActive)
    $(".result").html("Oh, you turn me on.")
  else
    $(".result").html("No, you turn me off.")
});

---

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