JSFiddle - React, Tailwind, and code Playground

by Galen Gidman

HTML

<p>
    <input type="radio" id="serve-yes" name="serve-area" data-toggle="#serve-yes-fields">
    <label for="serve-yes">Yes</label>
</p>
<p>
    <input type="radio" id="serve-no" name="serve-area" data-toggle="#serve-no-fields">
    <label for="serve-no">No</label>
</p>
<div id="serve-yes-fields" class="serve-fields">
    <p>Yes content.</p>
</div>
<div id="serve-no-fields" class="serve-fields">
    <p>No content.</p>
</div>

CSS

.serve-fields {
    display: none;
}
.serve-fields.is-visible {
    display: block;
}
#serve-yes-fields {
    background: green;
}
#serve-no-fields {
    background: red;
}

JavaScript

function toggleServeAreaFields() {
    $('.serve-fields.is-visible').removeClass('is-visible');

    $($('input[name=serve-area]:radio:checked').data('toggle')).toggleClass('is-visible');
}

toggleServeAreaFields();

$('input[name=serve-area]:radio').change(function () {
    toggleServeAreaFields();
});