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>
              ...

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

$(function () {
                $("ul.featureListings").hide();
                $(".featuresHeading").click(function (event) {
                    if (event.target !== this && !$(event.target).is('input')) {
                        return;
                    }
                    $(this).find('.rd').prop('checked', true);
                    if ($(this).find('.rd').is(':checked')) {
                        $('ul.featureListings.demo').slideUp(300);
                        $(this).find('.rd').prop('checked', true);
                        $('ul.featureListings.demo').not($(this).next().find('ul.featureListings')).removeClass("demo");
                        if ($(this).next().find('ul.featureListings').hasClass("demo")) {
                            $(this).next().find('ul.featureListings').removeClass("demo");
                            $(this).next().find('ul.featureListings').slideUp(300);
                        }
                        else {
                            $(this).next().find('ul.featureListings').addClass("demo");
                            $(this).next().find('ul.featureListings').slideDown(300);
                        }
                    }
                });
            });