JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<ul>
   <li>
       <input name="report" class="initial" type="radio" id="comparison">Comparison Report
       <ul id="list-comparison">
            <li>
                <input type="radio">Option 1<br>
                <input type="radio">Option 2<br>
            </li>
        </ul>
    </li>       
    <li>
        <input name="report" class="initial" type="radio" id="individual">Individual Report
        <ul id="list-individual">
            <li>
                <input type="radio">Line<br>
                <input type="radio">Pie<br>
            </li>
        </ul>
    </li>   

</ul>
</form>

CSS

UL > LI > UL{
    margin-left:20px;
    display:none;
}

JavaScript

$(".initial").click(function(){
    var ul = $(this).next(); // Get the UL
    ul.slideDown(200); // Slide down the list
    $("[id^=list-]").not(ul).slideUp(200); // Slide up the other list
});