JSFiddle - React, Tailwind, and code Playground

by mhusaini

HTML

<ul id="expList">
    <li id="JeffID4" class="collapsed expanded">
        Assessment
        <ul class="inputs-list" style="display: block;">
            <li id="apple">
               <label class="checkbox inline">
                 <input type="checkbox">
                 ATGM
               </label>
            </li>
            <li id="apple">
               <label class="checkbox inline">
                 <input type="checkbox">
                 FMS
               </label>
            </li>
        </ul>
    </li>
</ul>

JavaScript

function prepareList() {
    $('#expList').find('li:has(ul)').click(function(event) {
        //If line item is expandable but has no line items then call the service to retrieve data
        if ($(event.target).hasClass('collapsed') && $(event.target).find('li').length == 0) {
            $(event.target).children('ul').append("Add New LI's")
            $('#expList').find('li:has(ul)').addClass('collapsed');
            $('#expList').find('ul').addClass('inputslist');
            $(event.target).find('li:has(input)').unbind();
            $(event.target).children('ul').hide();
        }

        //Toggle the lists if they show or not
        $(event.target).toggleClass('expanded');
        $(event.target).children('ul').slideToggle('medium');
    }).addClass('collapsed').removeClass('expanded').children('ul').hide();
};


$(document).ready(function() {
    prepareList()
});