Show/Hide Target Sections Using Checkbox Buttons With jQuery

Show/hide target section/div using checkbox buttons with jQuery, you need these steps given below: 1- Add a function/attribute in input field 'wt-checkbox'. 2- Set the values of two attributes 'name' and 'value'. 3- In target section/div/p etc. you need to add function/attribute 'wt-toggle="name-value"' and there 'name' will be the value of checkbox button 'name' and 'value' will be the checkbox 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 Checkbox Buttons With jQuery</h3>
<label><input type="checkbox" name="name1" value="checkbox1" wt-checkbox>Checkbox 1</label>
<label><input type="checkbox" name="name2" value="checkbox2" wt-checkbox>Checkbox 2</label>
<label><input type="checkbox" name="name3" value="checkbox3" wt-checkbox>Checkbox 3</label>

<p wt-toggle="name1-checkbox1" style="display:none">Checkbox 1 Text</p>
<p wt-toggle="name2-checkbox2" style="display:none">Checkbox 2 Text</p>
<p wt-toggle="name3-checkbox3" style="display:none">Checkbox 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 checkbox buttons |*/
/*|--------------------------------------------------|*/
$.fn.WT_CHECKBOX = function($this) {
  var name = $this.attr('name'), checked = $this.val();
  $('[wt-toggle='+name+'-'+checked+']').slideToggle();
};
$('[wt-checkbox]').on('change', function() {
  $.fn.WT_CHECKBOX($(this));
}).load($.fn.WT_CHECKBOX($('[wt-checkbox]:checked')));