title: show / hide form fields based on a select option (dropdown)
body: <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>