Create a dynamic nested sortable accordion

[mostafa272]

Hi
I want to create a nested sortable accordion, but I can not place accordion panels as child of other panel or sort them.

` jQuery('.accordion_box').accordion({
collapsible: true,
active: false,
heightStyle:"content",
header: 'h3'
}).nestedSortable({
items: 'li',
handle: 'h3',
toleranceElement: '> div',
});

jQuery('.accordion_box').on('accordionactivate', function (event, ui) {
    if (ui.newPanel.length) {
        jQuery('.accordion_box').sortable('disable');
    } else {
        jQuery('.accordion_box').sortable('enable');
    }
});

jQuery('.cni_items_new').on('click',function(){
var item_count = jQuery('.accordion_box .s_panel').length;
var num = Number(item_count+1);
//output is a string of html tags li is container, h3 is handle of accordion
jQuery('.accordion_box').append(output);
jQuery('.accordion_box').accordion( "refresh" );

});`

When user click on a button with .cni_items_new class, a new panel added to accordion.
The output variable that appends to accordion is a li container includes h3 tag as handle of panel and a div for panel content.

HTML code:
<ol class="items_container accordion_box"></ol>