Twitter Bootstrap Многоуровневый аккордеон с сортировкой jQueryUI

Question

Если я отброшу элемент группы «Группа №2» первого уровня в список групп подуровня, он рухнет (закрывается) с помощью родительского аккордеона. Как решить эту проблему?

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

коллапсирующего и расширение события связаны при загрузке, и влияют на одни и те же элементы, после перегруппировки.
Я не знаю, сможет ли twitter-bootstrap переопределить эти события и сбросить элементы, которые необходимо свернуть и развернуть. Если нет - возможно, рассмотрим возможность продления их версии.