Bootstrap 3 vertical menu with toggable submenus

by Ulugbek Aripov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<div id="content">
  <div id="left">


<nav>
    <ul class="nav">
	    <li><a href="#">LongOption 1</a></li>
		<li><a href="#" id="btncol" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">LongOption 2<span class="caret"></span></a>
			<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btncol">
				<li><a href="#1">LongOption SUB 1</a></li>
				<li><a href="#2">LongOption SUB 2</a></li>
				<li><a href="#3">LongOption SUB 3</a></li>
			</ul>
		</li>
		<li><a href="#" id="btncol2" data-toggle="collapse" data-target="#submenu2" aria-expanded="false">LongOption 3<span class="caret"></span></a>
			<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btncol2">
				<li><a href="#1">LongOption SUB 1</a></li>
				<li><a href="#2">LongOption SUB 2</a></li>
				<li><a href="#3">LongOption SUB 3</a></li>
				<li><a href="#4">LongOption SUB 4</a></li>
 				<li><a href="#5">LongOption SUB 5</a></li>
			</ul>
		</li>
		<li><a href="#" id="btncol3" data-toggle="collapse" data-target="#submenu3" aria-expanded="false">LongOption 4<span class="caret"></span></a>
			<ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btncol3">
				<li><a href="#1">LongOption SUB 1</a></li>
				<li><a href="#2">LongOption SUB 2</a></li>
				<li><a href="#3">LongOption SUB 3</a></li>
			</ul>
		</li>
		<li><a href="#">Link 5</a></li>
	</ul>
</nav>

  </div>
  <div id="right">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lorem mauris. Nulla fermentum tincidunt nulla et dignissim. In porttitor sem id velit lobortis aliquam. Duis et purus ac orci porttitor luctus at quis leo. Mauris vulputate pellentesque est, sit amet egestas tellus facilisis sit amet. Cras sodales bibendum tellus, a gravida tortor hendrerit sed....

CSS

#content, html, body {
			    height: 100%;
			}
			#left {
			    float: left;
			    top:0px;
			    width: 30%;
			    background: #ac4343;
			    color:#ffffff;
			    height: 100%;
			    overflow: scroll;
			    	/*border-right:30px solid rgba(255,255,255,.2);
				border-left:20px solid rgba(255,255,255,.2);*/
			    
			}
			#right {
			    float: left;
			    top:0px;
				border-right:40px solid transparent;
				border-left:20px solid transparent;
			    width: 70%;
			    background: #000000;
          			    color:#ffffff;
			    height: 100%;
			    overflow: scroll;
			}
			
			
			ul.nav a { color: #ffffff !important; }
			ul.nav a:active { background-color: #666666  !important; color: #ffffff !important; }
			ul.nav a:focus { background-color: #666666  !important; color: #ffffff !important; }
			ul.nav a:visited { background-color: #666666  !important; color: #ffffff !important; }

JavaScript

/* Bootstrap minified JavaScript included as External Resource */