jQuery Toggle buttons are usually used where the user can choose only Yes/No option such as gender option (Male/Female). Now a days lots of controls have been using to provide best user interface. Nice looking and easy too use jQuery Toggle Button Plugin increase user interaction in web page.

sSwitch JQuery Toggle Plugin - Sgeek

Introducing a new jQuery switch plugin, it helps you to turn your default HTML checkbox inputs into beautiful switches in few simple simple steps.

 Demo Download

JQuery Toggle Button Plugin

Sswitch Supports all modern browsers such as Chrome, Firefox, Opera, Safari, IE8+. You can easily integrate Sswitch plugin in web page. It only requires knowledge of HTML and JavaScript.

Directory Structure



Include the jQuery and sSwitch plugin JavaScript and CSS into the <head> tag of page. Download JQuery library in js folder. You need to have basic skill of JQuery framework and JavaScript Scripting language.
Now, Download Sswitch JavaScript and CSS stylesheet into js and css folder accordingly.

Add checkbox in HTML document having class name “checkbox”. Class checkboxName is used for initializing the sSwitch plugin in later part.

Initialization plugin in document’s onReady() event. The onSwitchChange method executes when user changes state of switch. You can do your magic in this part.

Full Code


Two major part of plugin is to render HTML element and initialize plugin using class name. I will share other tutorials of JQuery Plugin soon.

Read More:
How To Create Simple JQuery Plugin
Best Syntax Highlighter Plugins Of WordPress
How To Create Twitter Bot Using Tweepy In Python

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">