When dropping the first-level group "Group #2" element into the sub-level group list, it causes the parent accordion to collapse. How can this issue be resolved?
$(document).ready(function() {
// Append icon-plus for all headings
$('.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>