show / hide form fields based on a select option (dropdown) <p>I have a select dropdown menu with many options to choose from.</p> <p>When a person chooses an option, I need the form fields to change according to the select menu.</p> <p>For some reason, I am stuck. I would like to blame the culprit on the fact that I have classes which are hidden in the element which should be shown. The problem with that is that I cannot think of the proper way to approach this.</p> <p>It is probably worth mentioning that I am using WordPress and these fields are used for extra user registration fields.</p> <p>Here is a <a href="https://jsfiddle.net/AndMcSpadden/dtrm6cpr/1/" rel="nofollow"><strong>fiddle for method 1</strong></a><br/> Here is a <a href="http://jsfiddle.net/AndMcSpadden/hb38zswz/" rel="nofollow"><strong>fiddle for method 2</strong></a></p> <p><strong>html</strong></p> <pre><code>&lt;div id="reg_mem_type" class="form-row form-row-wide"&gt; &lt;label for="reg_mem_type"&gt;'Member Type' &lt;/label&gt; &lt;select id="reg_mem_type" name="mem_type" value="'.esc_attr($_POST['mem_type']).'"&gt; &lt;option value="ARENA"&gt;ARENA&lt;/option&gt; &lt;option value="ARO"&gt;ARO&lt;/option&gt; &lt;option value="BUILD"&gt;BUILD&lt;/option&gt; &lt;option value="RM"&gt;RM&lt;/option&gt; &lt;option value="CLUBINS"&gt;CLUBINS&lt;/option&gt; &lt;option value="AFFL"&gt;AFFL&lt;/option&gt; &lt;option value="HOCKEY"&gt;HOCKEY&lt;/option&gt; &lt;option value="HOCKEYA"&gt;HOCKEYA&lt;/option&gt; &lt;option value="PRO"&gt;PRO&lt;/option&gt; &lt;option value="SKATER"&gt;SKATER&lt;/option&gt; &lt;option value="WE"&gt;WE&lt;/option&gt; &lt;option value="LINS"&gt;LINS&lt;/option&gt; &lt;option selected disabled value="Member"&gt;Member Type&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="member-type bs-member-type form-row form-row-wide"&gt; &lt;h2&gt;personal info&lt;/h2&gt;&lt;/div&gt; &lt;div class="member-type bs-member-type form-row form-row-wide"&gt;&lt;label for="reg_first_name"&gt;'.__('First Name', 'woocommerce').'&lt;/label&gt; &lt;input type="text" class="input-text" name="first_name" id="reg_first_name" size="10" value" '.esc_attr($_POST['first_name']).'" /&gt;&lt;/div&gt; &lt;div class="member-type bs-member-type form-row form-row-wide"&gt;&lt;label for="reg_last_name"&gt;'.__('Last Name', 'woocommerce').'&lt;/label&gt; &lt;input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" value" '.esc_attr($_POST['last_name']).'" /&gt;&lt;/div&gt; &lt;div class="arena-member-type bs-member-type form-row form-row-wide"&gt; &lt;h2&gt;company info&lt;/h2&gt;&lt;/div&gt; &lt;div class="bs-member-type arena-member-type form-row form-row-wide"&gt; &lt;label for="reg_website"&gt;'.__('Website' , 'woocommerce').'&lt;/label&gt; &lt;input type="text" class="input-text" name="website" id="reg_website" value" '.esc_attr($_POST['website']).'"/&gt;&lt;/div&gt; &lt;div class="arena-member-type bs-member-type form-row form-row-wide"&gt; &lt;label for="reg_fax"&gt;'.__('Fax' , 'woocommerce').'&lt;/label&gt; &lt;input type="text" class="input-text" name="fax_num" id="reg_fax" value" '.esc_attr($_POST['fax_num']).'"/&gt;&lt;/div&gt; </code></pre> <p><strong>css- method 1</strong></p> <pre><code>.member-type { display: none; } .pro-member-type { display: none; } .bs-member-type { display: none; } .arena-member-type { display: none; } .show-fields { display:block; } .hidden-fields { display:none; } </code></pre> <p><strong>css method2</strong></p> <pre><code>.member-type { display: none; } .pro-member-type { display: none; } .bs-member-type { display: none; } .arena-member-type { display: none; } .show-fields { display:block; } .hidden-fields { display:none; } </code></pre> <p><strong>js method 1</strong></p> <pre><code>jQuery(document).ready(function ($) { $('select[name=mem_type]').change(function () { // hide all optional elements $('.member-type').css('display', 'none'); $('.arena-member-type').css('display', 'none'); $('.bs-member-type').css('display', 'none'); $('.pro-member-type').css('display', 'none'); $("select[name=mem_type] option:selected").each(function () { if ($(this).val() == "SKATER" || "HOCKEY" || "HOCKEYA") { $('.member-type').css('show-fields'); } else if ($(this).val() == "BUILD") { $('.bs-member-type').addclass('show-fields'); } else if ($(this).val() == "ARENA") { $('.arena-member-type').addclass('show-fields'); } else if ($(this).val() == "PRO") { $('.pro-member-type').addclass('show-fields'); } }); }); }); </code></pre> <p><strong>js method 2</strong></p> <pre><code>jQuery(document).ready(function ($) { $('select[name=mem_type]').change(function () { // hide all optional elements $('.member-type').css('display', 'none'); $('.arena-member-type').css('display', 'none'); $('.bs-member-type').css('display', 'none'); $('.pro-member-type').css('display', 'none'); $("select[name=mem_type] option:selected").each(function () { if ($(this).val() == "SKATER" || "HOCKEY" || "HOCKEYA") { $('.member-type').css('display', 'block'); } else if ($(this).val() == "BUILD") { $('.bs-member-type').css('display', 'block'); } else if ($(this).val() == "ARENA") { $('.arena-member-type').css('display', 'block'); } else if ($(this).val() == "PRO") { $('.pro-member-type').css('display', 'block'); } }); }); }); </code></pre>