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>
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('.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>