Reveal either a the "state" field of "province" field based on the selection of a country dropdown field

unbounce-state-province-conditional-reveal.html

<script>
/*
Unbounce Community :: Tips & Scripts :: Conditional State/ Province Form Field Based on Dropdown 
TS:0002-04-060
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/  
  
  // Conditional Reveal state/province field based on selection of the country dropdown
  // Make sure the "state" field is placed after the country dropdown. Place the province field after the state field
  
  $(document).ready(function(){(function(){
  var submitBtn = $("#lp-pom-button-171"); // Add ID of Submit Button
  var field = $("#country");  // Add ID of Dropdown field
  var provinceFld = ("province");  // Add ID of Province field (exclude #)
  var stateFld = ("state");  // Add ID of Province field (exclude #)
  
  var conField01 = field.parent().next();
  var conField02 = conField01.next();
  
  var topPos = conField01.position().top;
  conField02.css({top: topPos});        
  
  conField01.css("display", "none");
  conField02.css("display", "none");
  
  var fieldHeight = conField01.height();
  var space = fieldHeight*2+37;
  var halfSpace = space/2;
  
  var moreFields = $(conField02).nextAll();
  moreFields.animate({top: "-=" + space},0); 
  
  var i = true;
  $(field).change(function() {
     if ($(this).val() == "United States") {
      conField01.fadeIn("slow");
      conField02.fadeOut("slow");
      document.getElementById(stateFld).setAttribute("required", "");
      document.getElementById(provinceFld).removeAttribute("required");
      module.lp.form.data.validationMessages.State = "Please select a State"
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else if ($(this).val() == "Canada") {
      conField01.fadeOut("slow");        
      conField02.fadeIn("slow");
      document.getElementById(provinceFld).setAttribute("required", "");
	    document.getElementById(stateFld).removeAttribute("required");
      module.lp.form.data.validationMessages.Province = "Please select a Province"
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else {
      i = true;
      conField01.fadeOut("slow");
      conField02.fadeOut("slow");
      document.getElementById(provinceFld).removeAttribute("required");
	    document.getElementById(stateFld).removeAttribute("required");
      if (conField01.css('display') == 'block' || conField02.css('display') == 'block') {
        moreFields.animate({top: "-=" + halfSpace}, 600);
        submitBtn.animate({top: "-=" + halfSpace}, 600);
      }  
    }
  });
  var fieldAdjust = function() {
    moreFields.animate({top: "+=" + halfSpace}, 600);
    submitBtn.animate({top: "+=" + halfSpace}, 600);
  }
})();   });
</script>