JSFiddle - React, Tailwind, and code Playground

by Andrew McSpadden

HTML

<div id="reg_mem_type" class="form-row form-row-wide"> <label for="reg_mem_type">'Member Type' </label>

        <select id="reg_mem_type" name="mem_type" value="'.esc_attr($_POST['mem_type']).'">

          <option value="ARENA">ARENA</option>

          <option value="ARO">ARO</option>

          <option value="BUILD">BUILD</option>

          <option value="RM">RM</option>

          <option value="CLUBINS">CLUBINS</option>

          <option value="AFFL">AFFL</option>

          <option value="HOCKEY">HOCKEY</option>

          <option value="HOCKEYA">HOCKEYA</option>

          <option value="PRO">PRO</option>

          <option value="SKATER">SKATER</option>

          <option value="WE">WE</option>

          <option value="LINS">LINS</option>

          <option selected disabled value="Member">Member Type</option>

        </select>

      </div>



<div class="member-type bs-member-type form-row form-row-wide"> <h2>personal info</h2></div>
<div class="member-type bs-member-type form-row form-row-wide"><label for="reg_first_name">'.__('First Name', 'woocommerce').'</label>
    <input type="text" class="input-text" name="first_name" id="reg_first_name" size="10" value" '.esc_attr($_POST['first_name']).'" /></div>
<div class="member-type bs-member-type form-row form-row-wide"><label for="reg_last_name">'.__('Last Name', 'woocommerce').'</label>
    <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" value" '.esc_attr($_POST['last_name']).'" /></div>
<div class="arena-member-type bs-member-type form-row form-row-wide"> <h2>company info</h2></div>
<div class="bs-member-type arena-member-type form-row form-row-wide"> <label for="reg_website">'.__('Website' , 'woocommerce').'</label>
    <input type="text" class="input-text" name="website" id="reg_website" value" '.esc_attr($_POST['website']).'"/></div>
<div class="arena-member-type bs-member-type form-row form-row-wide"> <label for="reg_fax">'.__('Fax' ,...

CSS

.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;}
}

JavaScript

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');
        }

    });
}); 
  });