JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="product-options-wrapper" class="product-options">
<dd>
<div class="input-box display">
<ul id="options-6032-list" class="options-list">
<li>
<input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option show" type="radio" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked"><label for="options_6032_2">Show </label>
</li>
<li>
<input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option hide" type="radio" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()"><label for="options_6032_3">Hide</label>
</li>
</ul>
</div>
</dd>
<div class="fields">
<dd>
<div class="input-box fontclass">
<select id="select_6031" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6031]">
<option price="0" value="42969">Arial </option>
<option price="0" value="42970">Lato </option>
<option price="0" value="42971">Disney Print </option>
</select>
</div>
</dd>
<dd>
<div class="input-box">
<input id="options_6030_text mirror" class="input-text required-entry validate-length maximum-length-25 product-custom-option form-control" type="text" value="" name="options[6030]" onchange="opConfig.reloadPrice()">
</div>
</dd>
<dd class="last">
<div class="input-box colorclass">
<select id="select_6028" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6028]">
...
JavaScript
$(".show").change(function() {
if(this.checked) {
$(".fields").show();
}
});
$(".hide").change(function() {
if(this.checked) {
$(".fields").hide();
}
});