Enlarge this messageWarning: This website by nature is experimental, please upgrade your browser or you will be punished.

Engage Interactive Labs

Return to the main site.

iToggle for jQuery

A completely unashamed rip of those lovely sliding on/off buttons on the iPhone, making checkboxes (and radio buttons) look good!

This started as a really simple little excersise in bordom one evening just to see if we could replicate the look and feel of the iPhone sliding toggles on the web. Now, it's a fully blown plugin that should do most the work for you! Just like the Last.FM plugin the styling is left almost entirely up to you. There is a template you need to follow, but this just determines a layout, nothing more.

In the download you'll find the CSS, HTML, Javascript and a .PSD template that will help you create a unique looking toggle.

Instructions:

.01 Set up your page

Before the fun stuff, we have to include all the files in the head of your page. Firstly we have jQuery (of course), the iToggle plugin with CSS and optionally the easing plugin which you can download here.

You also need to create an image. For now though, you can download (right click and save as) our faithful recreation. In the download pack I have included a template PSD.

Show HTML
<link rel="stylesheet" type="text/css" href="/style/engage.itoggle.css"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easing.js"></script>
<script type="text/javascript" src="/js/engage.itoggle.js"></script>

.02 Adding the HTML

The html is really simple. Just set up a form in the way you would normally. All you need to be aware of is that groups of checkboxes or radio buttons need a container. The easiest is a div with an id. Here is the HTML I used in the examples on this page.

Show HTML
<h3>Example 01</h3>
<p>The simplest implementation.</p>
<input type="checkbox" id="example_1" />
<div id="example_2">
	<h3>Example 02</h3>
	<p>Using it on a group of checkboxes with labels.</p>
	<label for="example_2a">Example 2 a</label>
	<input type="checkbox" checked="checked" id="example_2a" />
	<label for="example_2b">Example 2 b</label>
	<input type="checkbox" id="example_2b" />
	<label for="example_2c">Example 2 c</label>
	<input type="checkbox" checked="checked" id="example_2c" />
</div>
<div id="example_3">
	<h3>Example 03</h3>
	<p>Using it with a group of radio buttons.</p>
	<input type="radio" id="example_3a" name="example_3" checked="checked" />
	<input type="radio" id="example_3b" name="example_3" />
	<input type="radio" id="example_3c" name="example_3" />
</div>

.03 Configure the plugin

Calling the plugin is easy. If you are targeting an individual checkbox then just give it an id and use that. If you are targeting multiple checkboxes or radio buttons then target the container.

There are a few options and callbacks in place to help you make the most of the pluggin:

  • type: Checkbox or Radio. The default is checkbox.
  • keepLabel: If your site has a non-javascript version you may have used labels, if you don't need them any more, set this to false. Default is true.
  • easing: If you downloaded the easing plugin you can specify an easing option here. Default is none.
  • speed: This is how fast the slide happens. I wouldn't set this too high. 200 is default.
  • onClick: This callback will fire when you click.
  • onClickOn: This one will only fire when you click to turn a toggle on.
  • onClickOff: And this one only to turn off.
  • onSlide: This callback will fire when the toggle has finnished sliding.
  • onSlideOn: This one will fire when the toggle has finished sliding on.
  • onSlideOff: And this one when it's finished sliding off.

If you don't need to change a setting or use a callback, you don't need to include it in the settings list.

Show Javascript
$(document).ready(function() {
	$('input#example').iToggle({
		easing: 'easeOutExpo',
		type: 'radio',
		keepLabel: true,
		easing: 'easeInExpo',
		speed: 300,
		onClick: function(){
			//Function here
		},
		onClickOn: function(){
			//Function here
		},
		onClickOff: function(){
			//Function here
		},
		onSlide: function(){
			//Function here
		},
		onSlideOn: function(){
			//Function here
		},
		onSlideOff: function(){
			//Function here
		},
	});
});

.04 Customise the CSS

The CSS is pretty simple as well really. Just style it like you would any other element. The html that is created by the javascript is just a label with an empty span inside.

When you click the toggle, all that happens is the background on the label slides from 0% to 100%. The span is simply an overlay that gives the toggle the illusion of depth. To simpify things you don't need to use the span, you could just give it a border.

The final bit of CSS just hides the existing inputs by shifting them way off the page.

Show CSS
div#itoggle label.ilabel{
	display:block;
	font-size:12px;
	padding-bottom:10px;
	cursor:pointer;
	}

div#itoggle label.itoggle,
div#itoggle label.itoggle span{
	display: block;
	width: 93px;
	height: 27px;
	margin-bottom: 20px;
	background: url(../images/itoggle.png) left bottom no-repeat;
	cursor:pointer;
	text-indent:-5000px;
	}
div#itoggle label.itoggle.iToff{
	background-position:right bottom;
	}
div#itoggle label.itoggle span{
	background-position: left top;
	margin: 0;
	}
div#itoggle input.iT_checkbox{
	position:absolute;
	top:-9999px;
	left:-9999px;
	}

/*	
	If you want the corners to be
	transparent, add these two lines
	to the main block above. Only
	works on webkit and mozilla browsers
	For more reliable results, make your
	own png using the supplied .psd
	
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
*/

Example 01

The simplest implementation.

Example 02

Using it on a group of checkboxes with labels.

Example 03

Using it with a group of radio buttons.