add collapsible into another collapsibles (nested collapsibles) in JQM - jquery-mobile

Question

I want to get this:
But I need to create the HTML dynamically because it's loaded via AJAX from an external ressource.
I already asked this question here (JQM: Dynamic nested collapsibles - $(collapsible).collapsible() & $(collapsible).trigger('create')) but I got it completly wrong with lists and collapsibles, so I figured a new question would be better.
Here is what I got so far:
function loadTipps() {
console.log("Lade Tipps..");
var categoriesURL = tippsURL+"?type=kategorien&callback=?"; // url for the categories
$.getJSON(categoriesURL,function(data) {
console.log("Lade Kategorien..");
var DIV_tipps_komplett = $("#tipps_komplett");
$.each(data, function(key,value){
var kategorie_ID = value.id;
var kategorie_NAME = value.name;
var collapsible_HTML = $('<div data-role="collapsible"></div>');
var kategorie_Ueberschrift_HTML = $('<h3>'+kategorie_NAME+'</h3>');
var tipps_kategorie_HTML = $('<div id="tipps_kategorie'+kategorie_ID+'" data-role="collapsible-set"></div>');
var tippURL = tippsURL+"?type=tipp&kat_id="+value.id+"&callback=?"; // url for the tipps of the current category
$.getJSON(tippURL,function(data2) {
$.each(data2, function(key2,value2){
var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><b>'+value2.name+'</b><p>'+value2.text+'</p><br></div>';
tipps_kategorie_HTML.append(tipp_Ueberschrift_Text_HTML);
}); //<--each
});//<--getJSON
collapsible_HTML.append(kategorie_Ueberschrift_HTML);
collapsible_HTML.append(tipps_kategorie_HTML);
DIV_tipps_komplett.append(collapsible_HTML);
});//<--each
DIV_tipps_komplett.trigger('create');
});//<--getJSON
}
This results in:
As you can see, the items in the first collapsible set are not in another collapsible set. Any ideas why?

Answer 1

Try changing the line:
var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><b>'+value2.name+'</b><p>'+value2.text+'</p><br></div>';
to
var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><h3>'+value2.name+'</h3><p>'+value2.text+'</p><br></div>';
The Collapsible needs the <h3> element instead of <b> to render.
Here is a demo of your exact code with the AJAX calls removed: http://jsfiddle.net/ezanker/RkLuV/
By the way, this is pretty much the answer I gave you here: collapsible list with collapsed items in jqm, it would probably have been better to continue the conversation there.