JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-check form-check-inline">
<input id="bg-image-emm" class="form-check-input" type="radio" name="image_location" value="bg-emm" />
<label for="bg-image-emm" class="form-check-label">Associate a Getty image</label>
</div>
<div class="form-check form-check-inline">
<input id="bg-image-upload" class="form-check-input" type="radio" name="image_location" value="bg-upload" />
<label for="bg-image-upload" class="form-check-label">Upload manually</label>
</div>
<div id="bg-image-emm-panel">
<a target="_blank"
rel="noopener noreferrer"
href="https://evi-multimedia-tools.aka.amazon.com/#/searchGettyImages">Get a Getty image</a>
<div class="form-field form-group">
<label for="user_image_id">Image id:</label>
<input id="user_image_id" class="form-control" form="trendForm" value="{{trend.image_id}}"/>
<button id="retriveEipsImage" title="Associate an image via ID" type="button" class="btn btn-info">Associate image</button>
</div>
</div>
JavaScript
if (jQuery('input[value=custom_field]:checked').length > 0){
jQuery('#image_location_custom_field').show()
}
else {
jQuery('#image_location_custom_field').hide();
}
jQuery('input[name=image_location]').change(function() {
var selected = jQuery(this).val();console.log(selected);
if(selected == 'custom_field'){
jQuery('#image_location_custom_field').show();
} else {
jQuery('#image_location_custom_field').hide();
}
});