Bootstrap 3 vertical menu with toggable submenus

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>
<nav>
    <ul class="nav">
	   <li><a href="#">Link 1</a></li>
		 <li><a href="#">Link 2</a><a href="#" class="toggle-custom" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
			  <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
				  <li><a href="#">Link 2.1</a></li>
				  <li><a href="#">Link 2.2</a></li>
				  <li><a href="#">Link 2.3</a></li>
			  </ul>
		</li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a><a href="#" class="toggle-custom" id="btn-4" data-toggle="collapse" data-target="#submenu4" aria-expanded="false"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
			  <ul class="nav collapse" id="submenu4" role="menu" aria-labelledby="btn-1">
				  <li><a href="#">Link 4.1</a></li>
				  <li><a href="#">Link 4.2</a></li>
				  <li><a href="#">Link 4.3</a></li>
			  </ul>
	 </li>
	</ul>
</nav>

CSS

/* Bootstrap minified CSS included as External Resource*/
.toggle-custom {position:absolute !important;top:0;right:0;}

.toggle-custom[aria-expanded='true'] .glyphicon-plus:before {
  content: "\2212";
}

JavaScript

/* Bootstrap minified JavaScript included as External Resource */