You can download this project in either zip or tar formats.
You can also clone the project with Git by running:
$ git clone git://github.com/MidnightLightning/jQuery-Toggle
After setting up jQuery and jQuery UI properly in your page, add "slidetoggle.css" to your head and "slidetoggle.js" to the foot of your body (after jQuery libraries), and then apply the widget to an element with the ".slideToggle()" function:
<html> <head> <link rel="stylesheet" href="css/custom/jquery-ui-1.8.18.custom.css" /> <link rel="stylesheet" href="css/slidetoggle.css" /> </head> <body> <input type="checkbox" id="myCheckbox" /> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery-ui-1.8.18.min.js"></script> <script src="js/slidetoggle.js"></script> <script> $(document).ready(function() { $('input#myCheckbox').slideToggle(); }); </script> </body> </html>
The widget uses the ui-state-active and ui-state-hilight jQuery UI CSS classes for the "on" state, and ui-state-default for the "off" state. If using the jQuery UI ThemeRoller, watch the "Datepicker" example widget; the appearance of the "today" day box is how the slideToggle "on" state will look, and the other, unselected days are how the "off" state will look.
When creating the slidetoggle widget, these options can be set as a javascript object passed to the constructor to set their initial value:
$('input#my_checkbox').slidetoggle({
checkedText: 'Yep',
uncheckedText: 'Nope'
});
After initialization, these options can be retrieved using 'option' as the first parameter passed to the widget function, and if a third parameter is set, the option value is updated:
var state = $('input#my_checkbox').slidetoggle('option', 'isChecked'); // Retrieve the option value
$('input#my_checkbox').slidetoggle('animate', false); // Set the option value
boolean
Global animation flag for this toggle. Sets the default option to animate or not for the "toggle", "turnOff" and "turnOn" methods.
string
Text to show on the "on" (left) side of the slide toggle. Defaults to the word "On".
boolean
Toggle to use CSS3 Transitions rather than jQuery animations for the slide effect. Defaults to false.
boolean
Stores the current state of the toggle; true if the toggle is "on", false if it's "off". Intended to be read-only, though you can set this option either at initialization or afterward, which is effectively the same as using the "turnOn" or "turnOff" method.
string
Text to show on the "off" (right) side of the slide toggle. Defaults to the word "Off".
string
Stretch the slider horizontally. If you adjust the default text labels, you may also need to adjust this to make sure all the text is visible in both states. Note this is a string; it's used in CSS directly, so should be a number followed by a unit (i.e. "150px", and not "150", or 150 (javascript integer)).
Widget events can be subscribed to in the same manner as other object events (use 'slidetoggle' as a prefix on the event name):
$('input#my_checkbox').on('slidetogglechange', function(e) { /* Do something */ });
Or when initializing the widget, the callback function can be passed as an option:
$('input#my_checkbox').slidetoggle({hover: function(e) { /* Do something */ });
Triggers when the state is changed.
Can be called by passing a string to the widget function with the same name as the method. Additional parameters can be passed after the name of the method:
$('input#my_checkbox').slidetoggle('turnOff', false); // Turn the toggle off, without animating the change.
.slideToggle('toggle', [boolean animate])
Changes the state of the toggle to whatever it isn't. If "animate" is set to false (defaults to 'animate' option, which is true by default), the change won't be animated.
.slideToggle('turnOff', [boolean animate])
Changes the state of the toggle to "off". If "animate" is set to false (defaults to 'animate' option, which is true by default), the change won't be animated.
.slideToggle('turnOn', [boolean animate])
Changes the state of the toggle to "on". If "animate" is set to false (defaults to 'animate' option, which is true by default), the change won't be animated.
If you're doing something more advanced with your slide toggles, it might be useful to know how the pieces of the widget are laid out. Here's the CSS classes used, and their functions.
Outer bounds of the slide toggle. This element is the one that has the overflow:hidden CSS property to hide the area of the slide toggle that's not active at the moment.
This is the element that moves left and right to create the slide effect.
Text label for the "on" state (and any background pattern on that side of the slide toggle).
Text label for the "off" state (and any background pattern on that side of the slide toggle).
The pin image in the middle of the slider. This element has the click-and-drag mouse events on it to animate the slide toggle incrementally.