Setup

Setting up SuperToggle could not be simpler.

Include the css and the library

<script type="text/javascript" src="supertoggle.js"></script>

Create an button element to be the SuperToggle.

<button id="example-toggle"></button>

Turn the element into a SuperToggle with some simple javascript

$("#example-toggle").supertoggle();

Setup Options

There are a few simple setup options for SuperToggle.

$("#example-toggle").supertoggle({
    onVal: true,
    onContent: "On",
    offVal: false,
    offContent: "Off",
    defaultState: true,
});

onVal

This parameter stores the value you want the SuperToggle to show when it is in its on state. (default:true)

onContent

This parameter stores HTML content of the SuperToggle in its on state. This can be either text or full HTML. (default:"On")

offVal

This parameter stores the value you want the SuperToggle to show when it is in its off state. (default:false)

offContent

This parameter stores HTML content of the SuperToggle in its off state. This can be either text or full HTML. (default:"Off")

defaultState

This parameter sets the value you want the SuperToggle to have when it is first created. (default:true)

CSS Classes

SuperToggle elements are assigned a range of CSS classes to make it easier for you to manipulate the look, feel and function of the toggle.