jQuery Mobile

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div data-role="collapsible">
<div class="ui-body-d tablist-content" data-bind='foreach: items'>
    <div data-bind="attr: {'id': 'collapsible-'+ $index}">
        	<h3 data-bind='text: title'></h3>

        <p> <span data-bind='text: content'></span>

            <ul data-role="listview" data-bind="foreach: { data: listViewData, as: 'listItem'}">
                <li><a href="#" data-bind="text: listItem.text"></a></li>
            </ul>
            
        </p>
    </div>
</div>
</div>

JavaScript

var List = function(title){
    var temp = [];
    for(var i = 0; i < 3; i++)
    {
        temp.push({text: title + ': ' + i})
    }
    return temp;
}
var Section = function(title, content){
    return {
            title: title,
            content: content, 
            listViewData: new List(title)
            }
}
var vm = function () {
    return {
        items: [ new Section("Section1", "Contents for Section 1"), 
                 new Section("Section 2", "Contents for Section 2")
               ]
    }
}

var modelInstance = new vm();

ko.applyBindings(modelInstance)
$("div[id^='collapsible']").collapsible()