JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<p id="billing_gorod_field">
    billing_gorod
    <input type="text" class="input-text" name="billing_gorod" id="billing_gorod">
</p>
<p id="billing_index_field">
    billing_index
    <input type="text" class="input-text " name="billing_index" id="billing_index">
</p>

<div id="order_review">
    <ul>
        <li>
            <input type="radio" id="shipping_method_1" name="shipping_method" class="shipping_method" checked="checked">
        </li>
        <li>
            <input type="radio" id="shipping_method_2" name="shipping_method" class="shipping_method">
        </li>
        <li>
            <input type="radio" id="shipping_method_3" name="shipping_method" class="shipping_method">
        </li>
    </ul>
</div>

CSS

#billing_index_field,
#billing_gorod_field {
    display: none;
}

JavaScript

var inputRadioMethod = document.querySelectorAll('#order_review input[type="radio"]');
var inputRadioMethod3 = document.getElementById('shipping_method_3');
var divBillingGorodField = document.getElementById('billing_gorod_field');
var divBillingIndexField = document.getElementById('billing_index_field');

for (i = 0; i < inputRadioMethod.length; i++) {
    inputRadioMethod[i].onclick = function() {
        if (inputRadioMethod3.checked) {
            divBillingGorodField.style.display = 'block';
            divBillingIndexField.style.display = 'block';
        } else {
            divBillingGorodField.style.display = 'none';
            divBillingIndexField.style.display = 'none';
        }
    }
}