Show/Hide Target Sections Using Radio Buttons With jQuery

Show/hide target section/div using radio buttons with jQuery, you need these steps given below: 1- Add a function/attribute in input filed 'wt-radio'. 2- Set the values of two attributes 'name' and 'value'. 3- In target section/div/p etc. you need to add function/attribute 'wt-collapse="name-value"' and there 'name' will be the value of radio button 'name' and 'value' will be the radio button value.

by Aqeel Malik

HTML

<!--
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
-->
<h3>Show/Hide Target Sections Using Radio Buttons With jQuery</h3>
<label><input type="radio" name="radios" value="radio1" wt-radio>Radio 1</label>
<label><input type="radio" name="radios" value="radio2" wt-radio>Radio 2</label>
<label><input type="radio" name="radios" value="radio3" wt-radio>Radio 3</label>

<p wt-collapse="radios-radio1" style="display:none">Radio 1 Text</p>
<p wt-collapse="radios-radio2" style="display:none">Radio 2 Text</p>
<p wt-collapse="radios-radio3" style="display:none">Radio 3 Text</p>

CSS

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/
input {margin-right: 5px}

JavaScript

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/
/*|--------------------------------------------------|*/
/*| show/hide target section/tag using radio buttons |*/
/*|--------------------------------------------------|*/
$.fn.WT_RADIO = function($this) {
  var name = $this.attr('name'), checked = $this.val();
  $('[wt-collapse*='+name+'-'+']').slideUp();
  $('[wt-collapse='+name+'-'+checked+']').slideDown();
};
$('[wt-radio]').on('change', function() {
  $.fn.WT_RADIO($(this));
}).load($.fn.WT_RADIO($('[wt-radio]:checked')));