JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<body>
<strong>A Basic Sample Pack contains:</strong>

    <br />
    <input type="checkbox" />Check
    <div id="listContainer">
        <p>
            <ul id="expList">
                <li>Test
                    <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>
</body>

</html>

CSS

/********************/

/* GENERAL SETTINGS */

/********************/
 #menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.clear {
    clear: both;
}
/********************/

/* EXPANDABLE LIST  */

/********************/
 #listContainer {
    margin-top:15px;
}
#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}
/* Collapsed state for list element */
 #expList .collapsed {
    background-image: url(https://dl.dropboxusercontent.com/u/77879984/html/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
 #expList .expanded {
    background-image: url(https://dl.dropboxusercontent.com/u/77879984/html/img/expanded.png);
}
#expList {
    clear: both;
}
.listControl {
    margin-bottom: 15px;
}
.listControl a {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px 10px;
}
.listControl a:hover {
    background-color:#555555;
    color:#222222;
    font-weight:normal;
}

JavaScript

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

		    //Create the button funtionality
		    $('#expandList')
		        .unbind('click')
		        .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();
		});