JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" />
<div id="listContainer">
    <p>
        <ul id="expList">
            <li>Hot Cups<ul>
            <li><input type="checkbox" name="Sample" value="val 1">Title 1</li>
            <li><input type="checkbox" name="Sample" value="val 2">Title 2</li>
            <li><input type="checkbox" name="Sample" value="val 3">Title 3</li>
            <li><input type="checkbox" name="Sample" value="val 4">Title 4</li>
            <li><input type="checkbox" name="Sample" value="val 5">Title 5</li>
            <li><input type="checkbox" name="Sample" value="val 6">Title 6</li>
            <li><input type="checkbox" name="Sample" value="val 7">Title 7</li>
        </ul>
    </p>
</div>

JavaScript

function prepareList() {
        $('#expList').find('li:has(ul)')
        .click( function(event) {
            if (this == event.target) {
                $(this).toggleClass('expanded');
                $(this).children('ul').toggle('medium');
            }
        })
        .addClass('collapsed')
        .children('ul').hide();

        //Create the button funtionality
        $('#expandList')
        .click( function() {
            $('.collapsed').addClass('expanded');
            $('.collapsed').children().show('medium');
        })
        $('#collapseList')
        .unbind('click')
        .click( function() {
            $('.collapsed').removeClass('expanded');
            $('.collapsed').children().hide('medium');
        })

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