Navigation Accordion - List Group - Minimal JS

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="panel panel-default">
		<div class="panel-heading">
			<h3>Navigation</h3>

		</div>
		<div id="sidebar" class="list-group"> 

			<a href="#" class="list-group-item active">
				<i class="icon-dashboard"></i> Dashboard
			</a>

			<a href="#users" class="list-group-item"  data-parent="#sidebar">
				<i class="icon-group"></i> Users
				<span class="badge bg_danger">0</span>
			</a>

			<div id="users" class="list-group subitem collapse">	

				<a href="#" class="list-group-item">
					<i class="icon-caret-right"></i> Users
					<span class="badge bg_danger">0</span>
				</a>

				<a href="#" class="list-group-item">
					<i class="icon-caret-right"></i> Create User
				</a>

				<a href="#" class="list-group-item">
					<i class="icon-caret-right"></i> Create Group
				</a>

			</div>	

			<a href="#articles" class="list-group-item"  data-parent="#sidebar">
				<i class="icon-file-text"></i> Articles
				<span class="badge bg_danger">0</span>
			</a>

			<div id="articles" class="list-group subitem collapse">	

				<a href="#" class="list-group-item bg_warning">
					<i class="icon-caret-right"></i> Articles
					<span class="badge bg_danger">0</span>
				</a>

				<a href="#" class="list-group-item">
					<i class="icon-caret-right"></i> Create Article
				</a>

			</div>

		</div>
	</div>

CSS

div.subitem a.list-group-item {
    padding-left: 30px;
}

JavaScript

$('#sidebar > a').on('click', function (e) {
		e.preventDefault();

		if(!$(this).hasClass("active")){
			var lastActive = $(this).closest("#sidebar").children(".active");
			lastActive.removeClass("active");
			lastActive.next('div').collapse('hide');
			$(this).addClass("active");
			$(this).next('div').collapse('show');

		}

	});