javascript - Twitter Bootstrap jQueryUI ソートによるマルチレベル アコーディオン

Question

最初のレベルのグループ「グループ #2」要素をサブレベルのグループ リストにドロップすると、親アコーディオンで折りたたまれます (閉じます)。この問題を解決するには？

jsFiddle デモ

$(document).ready(function() {

//append for all headings indicatoe icon-plus
$('.accordion-heading').prepend('<i class="ui-icon ui-icon-triangle-1-e"></i>');

// Change indicator element for sub-menu
$('.accordion-body').on('show', function(e) {
    e.stopPropagation();
   $(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
});
//Reverse it
$('.accordion-body').on('hide', function(e) {
    e.stopPropagation();
   $(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
});

//Make tabs sortable
$(".accordion-body > .accordion, .sidebar").sortable({
                connectWith: ".accordion",
                placeholder: "ui-state-highlight"
});

});

HTML

<nav class="accordion1 accordion sidebar">

    <div class="accordion-group">
        <div class="accordion-heading">
            <a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one">
                Group #1 </a>
        </div>
        <div class="collapse-one accordion-body collapse" style="height: 0px;">
...
                <div class="accordion2 accordion">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-one">
                                Sub-group #1 </a>
                        </div>
                        <div class="collapse-one-one accordion-body collapse" style="height: 0px;">
...
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-two">
                                Sub-group #2 </a>
                        </div>
                        <div class="collapse-one-two accordion-body collapse" style="height: 0px;">
...
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-three">
                                Sub-Group #3 </a>
                        </div>
                        <div class="collapse-one-three accordion-body collapse">
...
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a data-toggle="collapse" data-parent=".accordion1" href=".collapse-two">
                Group #2 </a>
        </div>
        <div class="collapse-two accordion-body collapse" style="height: 0px;">
...
        </div>
    </div>