JSFiddle - React, Tailwind, and code Playground

by Luiz Augusto Volpi Nascimento

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul>

<script id="itemTmpl" type="text/html">
    <li>
    	
    		<div class="panel panel-default">
        		<div class="panel-heading">
            		<a data-toggle="collapse" href="#collapse1" data-bind="text: name"></a>
        				<input type='checkbox' class="pull-right">
            </div> 
            <div id="collapse1" class="panel-collapse collapse panel-body" id="body">
            			<ul  class="list-unstyled" data-bind="template: { name: 'itemTmpl', foreach: $data.items }">
            
       					 </ul>
            </div>
           
        </div>
        
        
    </li>
</script>

CSS

li {
    margin-left: 10px;
    margin-bottom: -20px
}

JavaScript

var data = {

    items: [{
        "name": "MORPHED",
        "items": [{
            "name": "5 Day",
            "items": [{
                "CategoryId": 20,
                "name": "30 day countdown"
            }, {
                "CategoryId": 19,
                "name": "Staffing your program"
            }, {
                "CategoryId": 22,
                "name": "Emergency/Medical Information"
            }, {
                "CategoryId": 18,
                "name": "Promoting your program"
            }, {
                "CategoryId": 21,
                "name": "Week of camp"
            }]
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }, {
            "name": "Age Targeted",
            "items": []
        }]
    }, {
        "name": "CREATE",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }, {
        "name": "INNOVATE",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }, {
        "name": "ENVISION",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }]
};

ko.applyBindings(data);