add collapsible into another collapsibles (nested collapsibles) in JQM

Question

I want to get this:

nested collapsibles

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:

not nested

As you can see, the items in the first collapsible set are not in another collapsible set. Any ideas why?

do something like this http://jsfiddle.net/Palestinian/T3gAj/ as its difficult to give a full solution with the given data. If you create a jsfiddle, it will be easier to assist. — Omar, Nov 13 '13 at 13:22
So you answered your own duplicate question but you are not satisfied with your answer so you are asking it again? — shanabus, Nov 13 '13 at 13:24
possible duplicate of [JQM: Dynamic nested collapsibles - $(collapsible).collapsible() & $(collapsible).trigger('create')](http://stackoverflow.com/questions/18711948/jqm-dynamic-nested-collapsibles-collapsible-collapsible-collapsible) — shanabus, Nov 13 '13 at 13:24

score 0 · Answer 1 · edited May 23 '17 at 11:50

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.

add collapsible into another collapsibles (nested collapsibles) in JQM

1 Answers1