Bootstrap - Font Awesome -jQuery Menu Accordion

jQuery Accordian, but with Twitter Bootstrap and Font Awesome, plus the Top Level Menu Item has a URL, as well as the button acting as an icon.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
	        <li class="nav-item">
		        <a  data-target="#system-settings" data-toggle="pill" class="nav-link" href="#system-settings" id="system-settings">System Settings</a>
	        </li>
	        <li class="nav-item">
		        <a class="nav-link" href="#hosts"  id="hosts" data-parent="#hosts">Hosts</a>
	        </li>
	        <li class="nav-item ">
	          <a class="nav-link" href="#card-range" id="card-range">Card Ranges</a>
	        </li>
	        <li class="nav-item">
	          <a class="nav-link" id="pinpads" href="#pinpads">Pinpads</a>
	        </li>
					<li class="nav-item">
	          <a class="nav-link" id="xmls" href="#xmls">XMLs</a>
	        </li>
	      	<li class="nav-item">
	          <a class="nav-link" id="printers" href="#xmls">Printers</a>
	        </li>	 
	      	<li class="nav-item">
	          <a class="nav-link" id="tinyterms" href="#xmls">Tiny Terms</a>
	        </li>	 	        
	        <li class="nav-item">
	          <a class="nav-link" id="lanes" href="#lanes">Lanes</a>
	        </li> 
	      </ul>

CSS

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * = require dataTables/bootstrap/2/jquery.dataTables.bootstrap
 * = require dataTables
 */
@import "bootstrap";
@import "login";
@import "common";
@import "font-awesome.css";

.bg-inverse {
  background-color:  #ffffff !important;
  border: 1px solid #B2B2B2; 
}

.container-fluid {
  //margin-left: 20px;
}

@font-face {
  font-family: 'roboto';
  src: url('/assets/roboto.eot');
  src: url('/assets/roboto.eot?iefix') format('eot'),
  //url('/assets/roboto.woff') format('woff'),
  url('/assets/roboto.ttf') format('truetype'),
  url('/assets/roboto.svg#webfont') format('svg');
}



/* Sidebar navigation */
.sidebar {
  left: 0;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
  padding-right: 0;
  color: #2979EF;
  font-family: Roboto;
  font-weight: 500;
}

.sidebar .nav {
  margin-bottom: 20px;
}

.sidebar .nav-item {
  width: 100%;
}
.sidebar .active a {
  height: 30px;
  width: 250px;
  border: 1px solid #2979EF;
  background-color: #2979EF;
  color: white;
}

.sidebar .nav-item + .nav-item {
  margin-left: 0;
}

.sidebar .nav-link {
  border-radius: 0;
}
/* End sidebar navigation */

.config-container {
  margin-right: 35px;
}

 /* Placeholders */
.placeholders {
 ...

JavaScript

$(document).ready(function () {
  $(".nav li").click(function() {
      if ($(".nav li").removeClass("active")) {
          $(this).removeClass("active");
      }
      $(this).addClass("active");
  });

});