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

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:

• jQuery Plugin To Show & Hide Elements Conditionally - Visibly
• jQuery Plugin For Conditional Form Fields - conditionize.js
• jQuery Plugin For Handling Conditional Html Elements - Conditional

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.