Show/Hide Target Sections Using Select Options With jQuery
Show/hide target section/div using select options with jQuery, you need these steps given below: 1- Add a function/attribute in select tag 'wt-select'. 2- Set the values of options. 3- In target section/div/p etc. you need to add function/attribute 'wt-collapse="opt-value"' and there 'value' will be the value of selected option.
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 Select Options With jQuery</h3>
<select wt-select>
<option value="" disabled selected>Please choose</option>
<option value="select1">Option 1</option>
<option value="select2">Option 2</option>
<option value="select3">Option 3</option>
</select>
<p wt-collapse="opt-select1" style="display:none">Option 1 Text</p>
<p wt-collapse="opt-select2" style="display:none">Option 2 Text</p>
<p wt-collapse="opt-select3" style="display:none">Option 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
*/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 select options |*/
/*|---------------------------------------------------|*/
$.fn.WT_SELECT = function($this) {
$this.children().each(function() {
if($(this).val() == $this.val()) {
$('[wt-collapse=opt-'+$(this).val()+']').slideDown();
} else {
$('[wt-collapse=opt-'+$(this).val()+']').slideUp();
}
});
};
$('[wt-select]').on('change', function() {
$.fn.WT_SELECT($(this));
}).load($.fn.WT_SELECT($('[wt-select]')));