Twitter Bootstrap Multi level accordion with jQueryUI sorting

Question

If I drop first level group "Group #2" element in to sub level group list, it will collapse (close) with parent accordion. How to solve this problem?

jsFiddle Demo

$(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>

Answer 1

The collapsing and expanding events are bound at loading, and affect the same elements after rearranging.
I don't know if twitter-bootstrap can let you override these events and reset the elements, that need to collapse and expand. If not - maybe consider extending their version.