jQuery Plugin To Show / Hide Elements with Radio Buttons - Radio Toggle

jQuery Plugin To Show / Hide Elements with Radio Buttons - Radio Toggle
File Size: 786 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Radio Toggle is a really small jQuery plugin for toggling the visible of html elements depending on the checked state of the radio buttons. Ideal for creating conditional form elements that shows and hides form controls based on the value in other controls.

See also:

Basic usage:

1. Make sure to include the jQuery radio toggle plugin after jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/jsradiotoggle.js"></script>

2. Create html elements that will be toggled by radio buttons.

<div id="javascript" class="target">
  ...
</div>

<div id="css" class="target">
  ...
</div>

<div id="html" class="target">
  ...
</div>

3. Add a group of radio buttons to toggle the html elements you just created.

<div class="toggle">
  <input type="radio" id="javascript" data-toggle="#javascript"> JS
  <input type="radio" id="css" data-toggle="#css"> JS
  <input type="radio" id="css" data-toggle="#css"> css
</div>

4. Initialize the plugin by calling the function on the top element of your radio buttons.

$('.toggle').jsRadioToggle();

Change log:

2015-08-11

  • bugfix.

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