Create On/Off Toggle Buttons From Any Elements - toggleButton.js

The toggleButton.js jQuery plugin enables you to dynamically create on/off toggle buttons from any elements.

The toggle button provides 2 states (on and off) which can be used to toggle whatever you like.

How to use it:

1. Link to jQuery JavaScript library and the toggleButton.js plugin.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.togglebutton.js"></script>

2. Attach the function to the toggle element.

<a href="javascript:">Toggle Button</a>

$(function(){
  $('a').toggleButton();
});

3. Do something when you click the toggle button.

$('a').toggleButton({
  on: function () {
    // ...
  },
  off: function () {
    // ...
  },
  both: function (oEvent) {
    // on or off
  }
});

4. Set the on/off state of the toggle button.

$('a').data('toggleButton').on();
$('a').data('toggleButton').off();

5. Customize the styles of the toggle button that is active.

a.toggle_button__on {
  /* your styles here */
}

---

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