Simple Plain Toggle Button Plugin For jQuery - miniToggle.js

Simple Plain Toggle Button Plugin For jQuery - miniToggle.js
File Size: 5.71 KB
Views Total: 6128
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="" 
<script src="minitoggle.js"></script>

3. Initialize the jQuery miniToggle.js plugin.


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

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

5. Set the initial state of the toggle button.

  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.")
    $(".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.