Toggle Elements With A Checkbox Switch - jQuery Canecode Switch

Canecode Switch is a tiny jQuery plugin for generating a checkbox based switch control to show/hide any elements on toggle.

See Also:

• 10 Best Toggle Switch Plugins
• 10 Best Custom Checkbox And Radio Input Replacements

How to use it:

1. Import jQuery library and the Canecode Switch plugin's files into the HTML file.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/canecode_switch.js"></script>
<link rel="stylesheet" href="/path/to/canecode_switch.css" />

2. Create a normal checkbox input for the toggle switch.

<input id="example" type="checkbox" name="switch">

3. Initialize the plugin and specify the elements to show/hide as you click/tap on the toggle switch.

<div class="this_shows_when_switch_is_off">
  ... 
</div>

<div class="this_shows_when_switch_is_on">
  ...
</div>

$(function(){
  canecode_switch("#example",".this_shows_when_switch_is_off", ".this_shows_when_switch_is_on");
});

---

This awesome jQuery plugin is developed by mikeBengala. For more Advanced Usages, please check the demo page or visit the official website.