Toggle div based on radio button selection
v2
by ian_smithz
HTML
<h3>Choose Country</h3>
<input type="radio" value="true" name="choose-country" id="choose-country-uk" checked><label for="choose-country-uk">UK</label>
<input type="radio" value="false" name="choose-country" id="choose-country-other"><label for="choose-country-other">Other</label>
<select id="country" name="country" class="fm-select fm-input" autocomplete="off" required="" data-err-msg="Please choose your country" aria-hidden="true">
<option value="">Please choose your country</option>
<option value="AT">Austria</option>
<option value="BE">Belgium</option>
<option value="BG">Bulgaria</option>
<option value="HR">Croatia</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="EE">Estonia</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="GR">Greece</option>
<option value="HU">Hungary</option>
<option value="IE">Ireland</option>
<option value="IT">Italy</option>
<option value="LV">Latvia</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MT">Malta</option>
<option value="NL">Netherlands</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="RO">Romania</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="ES">Spain</option>
<option value="SE">Sweden</option>
</select>
CSS
#country {display:none;}
JavaScript
$("input[name='choose-country']").on("click", function(){
$("#country").toggle(this.value === "false" && this.checked).attr('aria-hidden', 'false');
});