Collection of free jQuery toggle switch code examples from Codepen, Github and other resources. Update of March 2021 collection. 3 new items.

Related Articles:

  1. CSS Toggle Switches
  2. Bootstrap Toggle Switches
  3. Tailwind Toggle Switches

Author

  • Sticky Biscuits

Links

Made with

  • HTML / CSS / JS

About a code

Switch, Checkbox, Radio Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Akshaya Venky

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Mute/Unmute Button

This example hold a mute/unmute micro interactions and uses GSAP timeline and drawSVG plugins for the animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Visnu Ravichandran

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animated CheckBox with Sound Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Akshaya Venky

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Gravity UI - Toggle Button with Ripple

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Shunya Koide

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

GSAP - Cat Toggle Button

He likes to sleep during the day time and play at night.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Elastic Volume Toggle

Sound on/off animated toggle switch in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js, timelinemax.js

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

3D Switch Animation #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, three.js, tweenmax.js

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

3D Switch Animation

Cool 3d switch animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, three.js, tweenmax.js

Author

  • Valery Alikin

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Toggle

Draggable skeuomorph switch - toggle.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, anime.js

Author

  • Abhisek Dutta

Links

Made with

  • HTML / CSS / JS

About a code

SVG Radio Button

Animated SVG radio button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Author

  • Russ Pate

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Toggle with jQuery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tachyons.css

Author

  • Diego Cadena

Links

Made with

  • HTML / CSS (Less) / JS

About a code

Button On/Off

Button on/off - sliding button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Himalaya Singh

Links

Made with

  • HTML / CSS / JS

About a code

Batman/Superman Toggle Button

Select your favourite superhero: Batman or Superman.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Smiley Switch Animation

Simple switches with animation in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Himalaya Singh

Links

Made with

  • HTML / CSS / JS

About a code

Gender Toggle Button

Gender (male/female) toggle button for data input form.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.min.css

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Switch Loading Animation

Switch with a very simple loading animation for an ajax call or something like that.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Ravi Dhiman

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Toggle Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Artyom

Links

Made with

  • HTML / CSS / JS

About a code

Simple Checkbox Switcher

Checkboxes and labels with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Timothee Guignard

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

SVG Toggle Animation

A full CSS/SVG ang jQuery checkbox button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Joseph Shenton

Links

Made with

  • HTML / CSS / JS

About a code

Brightness and Gamma Switch

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jonas Badalic

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

SVG Checkbox Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js

Author

  • Nikhil Krishnan

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Jquery Toggle Button

iOS style toggle switch button using jQuery and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lionel T

Links

Made with

  • HTML / CSS / JS

About a code

Day & Night Toggle Switch

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -