BS3 - Collapsible - Multi-Level - Sortable - SETTINGS EXAMPLE

by bizamajig

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://bizamajig.com/include/bizamajig-ui-plugins.min.js"></script>
<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>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a data-toggle="collapse" data-parent=".accordion1" href=".collapse-three"> Group #3 </a>
		</div>
		<div class="collapse-three accordion-body collapse"> ... </div>
	</div>
</nav>

JavaScript

// 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"
});