JSFiddle - React, Tailwind, and code Playground

by Jacob McLemore

HTML

<div id="product-options-wrapper" class="product-options">
        <dd>
            <div class="input-box display">
                <ul class="options-list">
                    <li>
                        <input class="radio product-custom-option" id="show" type="radio" name="hide-show" checked="checked"><label for="options_6032_2">Show</label>
                    </li>
                    <li>
                        <input class="radio product-custom-option" type="radio" id="hide" name="hide-show"><label for="options_6032_3">Hide</label>
                    </li>
                </ul>
            </div>
        </dd>

        <dd>
            <div class="input-box fontclass">
                <select>
                    <option>Arial </option>
                    <option>Lato </option>
                    <option>Disney Print </option>
                </select>
            </div>
        </dd>

        <dd>
            <div class="input-box">
                <input id="mirror" type="text" value="">
            </div>
        </dd>

        <dd class="last">
            <div class="colorclass">
                <select>
                    <option>red </option>
                    <option>black </option>
                </select>
            </div>
        </dd>
</div>

JavaScript

$("#hide").click(function() {
	$('div.fontclass').hide();
  $('div').children('#mirror').hide();
  $('div.colorclass').hide();
});

$("#show").click(function() {
	$('div.fontclass').show();
  $('div').children('#mirror').show();
  $('div.colorclass').show();
});