Building a JavaScript Toggle Button using jQuery

Not that there aren’t enough examples & implementations of javascript toggle buttons on Google, here’s another to add to the collection.

This plugins main features / capabilities are:

  • Cross browser compatible
  • As accessible & screen reader friendly as possible
  • Light-weight & easy to use
  • Works with both image sprites & regular HTML buttons
  • Single & multiple button selection modes
  • No / Disabled JavaScript fall over

Working example

Fall over example

Download

You can Download the jQuery Toggle button script and demo from here, there is also a much a better demonstration here showing other modes, options & features.

If you like or use it, you can always… Buy me a beer (or beers!)

Using the script to create a basic toggle button

We’ll start with an empty HTML5 document that looks like so:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body>

</body>

</html>

We’ll then add references to the toggleButton javascript file, the Google jQuery APIs and our style sheet within the <head> tags of the new document:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.toggleButton-min.js"></script>

<link rel="stylesheet" type="text/css" href="toggleButton.css" />

IMPORTANT: Some styles within the CSS document are required for the buttons to function correctly.

Next add a container within the body tags for the buttons. I’ll use <div> tags in this example, you’ll also need to give this container an ID:

<div id="normal"></div>

Within the container we’ll create the mark-up for the buttons. Each button uses four elements: a button, a check box, a label and div tags to hold it all together:

<div class="toggleBtn">

<button name="button1" type="button">Toggle</button>

<input type="checkbox" name="checkbox1" id="checkbox1" value="1" />

<label for="checkbox1">Toggle</label>

</div>

As shown above you need to assign the <div> tag with the class ‘toggleBtn’, you can name the other elements whatever you like.

The last thing we need to do is to activate the script, this is done by calling the jQuery function on your container, this code is again placed within the <head> tags:

<script type="text/javascript">

$(document).ready(function() {

$('#normal').toggleButton();

});

</script>

The finished document

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.toggleButton-min.js"></script>

<link rel="stylesheet" type="text/css" href="toggleButton.css" />

<script type="text/javascript">

$(document).ready(function() {

$('#normal').toggleButton();

});

</script>

</head>

<body>

<div id="normal">

<div class="toggleBtn">

<button name="button1" type="button">Toggle</button>

<input type="checkbox" name="checkbox1" id="checkbox1" value="1" />

<label for="checkbox1">Toggle</label>

</div>

</div>

</body>

</html>



Leave a Reply

Your email address will not be published. Required fields are marked *