Bootstrap 3 vertical menu with toggable submenus

by Rhys O'Connor

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<nav class="sidebar-nav">
  <header class="logo">
    <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a>
    <span id="logo">NAV</span>
  </header>
  <ul id="nav" class="nav">
    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i></a>
      <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
        <li><a href="#">profile.1</a></li>
        <li><a href="#">profile.2</a></li>
        <li><a href="#">profile.3</a></li>
      </ul>
      <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu2" aria-expanded="false"><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i></a>
        <ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
          <li><a href="#">About.1</a></li>
          <li><a href="#">About.2</a></li>
          <li><a href="#">About.3</a></li>
        </ul>
      </li>
      <li><a href="#"><i class="fa fa-history"></i>Blog</a></li>
      <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu3" aria-expanded="false"><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i></a>
        <ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1">
          <li><a href="#">Deals.1</a></li>
          <li><a href="#">Deals.2</a></li>
          <li><a href="#">Deals.3</a></li>
        </ul>
      </li>
  </ul>
</nav>

CSS

html,
body {
  font-family: 'Lato', sans-serif;
  height: 100%;
  background: #ecf0f1;
}

a {
  color: #008DE7;
  font-style: italic;
  font-weight: 700;
}

.content {
  min-width: 1260px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.content.sidebar-collapsed {
  padding-right: 65px;
  transition: all 100ms linear;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back {
  padding-right: 280px;
  transition: all 100ms linear;
}

.content.sidebar-collapsed .sidebar-nav {
  width: 65px;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back .sidebar-nav {
  width: 280px;
  transition: all 100ms ease-in-out;
}

.content.sidebar-collapsed .logo {
  padding: 26px;
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back .logo {
  width: 100%;
  padding: 21px;
  height: 136px;
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
}

.content.sidebar-collapsed #logo {
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.content.sidebar-collapsed-back #logo {
  opacity: 1;
  transition: all 200ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed #nav span {
  opacity: 0;
  transition: all 50ms linear;
}

.content.sidebar-collapsed-back #nav span {
  opacity: 1;
  transition: all 200ms linear;
}

.sidebar-nav {
  position: fixed;
  float: left;
  width: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #e74c3c;
  color: #aaabae;
  font-family: "Lato";
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.sidebar-nav-small {
  width: 60px;
}

#nav {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

#nav li {
  position: relative;
  margin: 0;
  font-size: 15px;
  border-bottom: 1px solid #fff;
  padding: 0;
}

#nav li a {
  font-style: normal;
  font-weight: 400;
  position: relative;
  display:...

JavaScript

$('#nav a').click(function() {
  $(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square');
});

var expand = true;
$('.sidebar-icon').click(function() {
  if (expand) {
    $('.sidebar-nav').css('width', '60px');
    expand = false;
  } else {
    $('.sidebar-nav').css('width', '250px');
    expand = true;
  }
})