Toggle div based on radio button selection

hidden radio

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<div class="country-change">

<label for="choose-country-uk">
<input type="radio" value="uk" name="choose-country" class="accessibility" id="choose-country-uk" checked>
UK</label>

<label class="text-underline pseudo-link" for="choose-country-other">
<input type="radio" value="other-country" name="choose-country" class="accessibility" id="choose-country-other">
Change country</label>

  <select id="country" name="country" class="fm-select fm-input" autocomplete="off" required="" data-err-msg="Please choose your country">
    <option value="">Please choose your country</option>
    <option value="UK">United Kingdom</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>

</div>

CSS

#country {display:none}


.country-change .pseudo-link {
    font-size: 13px;
    vertical-align: text-top;
    text-transform: none;
    text-decoration: underline;
}
.country-change .pseudo-link:hover {
  cursor: pointer;
}
.country-change .pseudo-link:focus{
   outline: #a9a9a9 dotted 2px;
   outline-offset: 1px
}

JavaScript

$("input[name='choose-country']").on("click", function(){
    $("#country").toggle(this.value === "other-country" && this.checked);
});