JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<ul class="featureBoxes paddingRight">
    <li class="featuresHeading features liListTo">
        <input type="radio" id="selectProvider" class="rd" name="rdbToList" value="1" />
        <label for="selectProvider">Radio 1</label>
    </li>
    <li>
        <ul class="featureListings ">
            <li>data 1</li>
        </ul>
    </li>
    <li class="featuresHeading options liListTo">
        <input type="radio" id="selectPatient" class="rd" name="rdbToList" value="2" />
        <label for="selectPatient">Radio 2</label>
    </li>
    <li>
        <ul class="featureListings">
            <li>
                <div id="sptDiv" style="padding: 2px 0px 2px 8px;">Data 2</div>
            </li>
        </ul>
    </li>
    <li class="featuresHeading curtain-options liListTo">
        <input type="radio" id="directEmail" class="rd" name="rdbToList" value="3">
        <label for="directEmail">Radio 3</label>
    </li>
    <li>
        <ul class="featureListings ">
            <li>Data 2</li>
        </ul>
    </li>
</ul>

CSS

.liListTo {
    height: 20px;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor:pointer;
    width:295px;
    color:#30A8AB;
}
.liListTo label {
    cursor:pointer;
}
ul {
    list-style-type: none;
}

JavaScript

$("ul.featureListings").hide();
$(".featuresHeading").click(function (event) {
    $("ul.featureListings").slideUp();
    $(this).next("li").find("ul").stop().slideDown(300);

});