Как показывать определённый кнтент при нажатии на радио кнопки?

Question

[solnce220]

Здравствуйте. Я только начал изучать js и нужна ваша помощь. Как показывать определённый блок при нажатии на радио кнопку? Нужно чтобы при нажатии на юр. лицо показывался блок registration__ur, и соотвецтвенно при нажатии ФОП - блок registration__fop.

<div class="registration__radio-btn">
                                <label for="ur" class="radio__label">
                                    <input type="radio" id="ur" class="radio" name="category">
                                    <span class="radio__costum"></span>
                                    Юр. лицо</label>
                            </div>
                            <div class="registration__radio-btn">
                                <label for="company" class="radio__label">
                                    <input type="radio" id="company" class="radio" name="category">
                                    <span class="radio__costum"></span>
                                    ФОП</label>
                            </div>
                            
                            <div class="registration__ur">
                                <h2 class="registration__item">1. Реквизиты</h2>
                                <form class="registration__form form_four">
                                    <input type="text" placeholder="ОКПО">
                                </form>
    
                                <h2 class="registration__item">2. Юридический адрес</h2>
                                <form class="registration__form form_two">
                                    <select name="country">
                                        <option value="country_1">Страна</option>
                                        <option value="country_2">Украина</option>
                                    </select>
                                    <select name="obl">
                                        <option value="obl_1">Область</option>
                                        <option value="obl_2">Киевская</option>
                                        <option value="obl_3">Львовская</option>
                                        <option value="obl_3">Сумская</option>
                                        <option value="obl_3">Харьковская</option>
                                    </select>
                                    <input type="text" placeholder="Город*">
                                    <input type="text" placeholder="Адрес">
                                    <input type="text" placeholder="Индекс">
                                </form>    
                            </div>

                            <div class="registration__fop">
                                <h2 class="registration__item">1. Реквизиты</h2>
                                <form class="registration__form form_four">
                                    <input type="text" placeholder="ЕДРПО">
                                </form>
    
                                <h2 class="registration__item">2. Юридический адрес</h2>
                                <form class="registration__form form_two">
                                    <select name="country">
                                        <option value="country_1">Страна</option>
                                        <option value="country_2">Украина</option>
                                    </select>
                                    <select name="obl">
                                        <option value="obl_1">Область</option>
                                        <option value="obl_2">Киевская</option>
                                        <option value="obl_3">Львовская</option>
                                        <option value="obl_3">Сумская</option>
                                        <option value="obl_3">Харьковская</option>
                                    </select>
                                    <input type="text" placeholder="Город*">
                                    <input type="text" placeholder="Адрес">
                                </form>    
                            </div>

Comments

[Ankhena]

Зачем для этого JS? (Если на JS, то это кнопки, а не радио)

<input type="radio" id="ur" class="radio" name="category">
<input type="radio" id="company" class="radio" name="category">
<label for="ur" class="radio__label">Юр. лицо</label>
<label for="company" class="radio__label">ФОП</label>
<div class="registration__ur">
  registration__ur
</div>
<div class="registration__fop">
  registration__fop
</div>

.registration__ur, .registration__fop {
  display: none;
}

#ur:checked ~ .registration__ur {
  display: block /*или какой там ему нужен*/
}
#company:checked ~ .registration__fop{
  display: block /*или какой там ему нужен*/
}