Create listview inside collapsible/divider dynamically

Question

I am trying to develope an application, and I'm using jQuery mobile for the UI. Does anybody know how to add a listview in a collapsible (as category) dynamically using JavaScript?

HTML:

<div data-role="content" id="introContent">
  <p id="introContentNoFeeds" style="display:none">welcome!
  </p>
  <ul id="feedList" data-role="listview" data-inset="true" data-split-icon="delete">
  </ul>
  <a href="addfeed.html" data-role="button" data-theme="b">Add Feed</a>
</div>

js:

function displayFeeds() {
    var feeds = getFeeds();
    if(feeds.length == 0) {
        //in case we had one form before...
        $("#feedList").html("");
        $("#introContentNoFeeds").show();
    } else {
        $("#introContentNoFeeds").hide();
        var s = "";
        for(var i=0; i<feeds.length; i++) {
            s+= "<li><a href='feed.html?id="+i+"' data-feed='"+i+"'>"+feeds[i].name+"</a> <a href='' class='deleteFeed' data-feedid='"+i+"'>Delete</a></li>";
        }
        $("#feedList").html(s);
        $("#feedList").listview("refresh");
    }   
}
function getFeeds() {
    if(localStorage["feeds"]) {
        return JSON.parse(localStorage["feeds"]);
    } else return [];
}
function addFeed(name,url) {
    var feeds = getFeeds();
    feeds.push({name:name,url:url});
    localStorage["feeds"] = JSON.stringify(feeds);

Answer 1

First of all, create a static collapsible-set div data-role="collapsible-set" and give it an id or a class.

<div data-role="page">
  <div data-role="content">
    <div data-role="collapsible-set" id="stuff"></div>
  </div>
</div>

The JS solution depends on your array's structure, I have created a simple one just for demo.

/* array */
var data = [{
    "title": "Category 1",
        "items": [
        "one", "two", "three"]
}, {
    "title": "Category 2",
        "items": [
        "four", "five", "six"]
}, {
    "title": "Category 3",
        "items": [
        "seven", "eight", "nine", "ten"]
}];

/* retrieve data from array */
$.each(data, function (i, v) {

    /* store array of listview items */
    var items = v.items;

    /* create a collapsible */
    var col = $("<div/>", {
        "data-role": "collapsible"
    });

    /* collapsible's title - add it to created collapsible */
    var title = $("<h3/>", {
        text: v.title
    }).appendTo(col);

    /* to store retrieved listview items */
    var list_items = '';

    /* read array of listview items */
    $.each(items, function (x, y) {
        list_items += "<li><a href='#'>" + y + "</li>";
    });

    /* create listview */
    var list = $("<ul/>", {
        "data-role": "listview",
           "id": "listview" + i, // if you want to give each listview an id
              "data-inset": true // or false, it's up to you
    });

    /* add listview items to created listview */
    $(list).append(list_items);

    /* add listview to collapsible */
    $(list).appendTo(col);

    /* finally, add them all into collapsible-set */
    $("#stuff").append(col).collapsibleset().trigger("create");
});

Demo