JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div class="level">
    <label><input type="radio" value="divFirst" />Radio First</label><br>
    <label><input type="radio" value="divSecond" />Radio Second</label><br>
    
    <br /><br />

    <!-- Radio value == div class -->
    <div class="divFirst" style="display: none;">
        Hello Radio 1<br />
        <input type="text" />
    </div>
                    
    <div class="divSecond" style="display: none;">
        Hello Radio 2<br />
        <textarea></textarea>                                
    </div>
<div>

JavaScript

$('input[value^="div"]').click(function(){
    var $$this = $(this),
        $$theClass = 'div.'+$$this.attr('value'),
        $$getParent = $$this.closest('.level');
    
    $$getParent.children('div[class^="div"]:not('+$$theClass+')').hide();
    $$getParent.children($$theClass).slideDown(300);
    $$this.parent('label').siblings('label').children().removeAttr('checked');
});