<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="nav-side-menu">
<div class="brand">Filter</div>
<i aria-expanded="true" data-target="#menu-content" data-toggle="collapse" class="fa fa-bars fa-2x toggle-btn"></i>
<div class="menu-list">
<ul class="menu-content collapse in" id="menu-content">
<li class="collapsed active" data-target="#products" data-toggle="collapse">
<a href="#"><i class=""><img src="http://skyrites.com/projects/spaciux/images/fa-user1.png" alt=""></i> <strong>Professional Type</strong> <span class="arrow"></span></a>
</li>
<ul id="products" class="sub-menu collapse fade">
<li class="active"><a href="#">Architect</a></li>
<li><a href="#">Interior Designer</a></li>
<li><a href="#">Carpenter</a></li>
</ul>
<li class="collapsed" data-target="#service" data-toggle="collapse">
<a href="#"><i class=""><img src="http://skyrites.com/projects/spaciux/images/fa-user2.png" alt=""></i> <strong>Service Type </strong> <span class="arrow"></span></a>
</li>
<ul id="service" class="sub-menu collapse">
<li><a href="#">Full Interior Service</a></li>
<li><a href="#">Design only</a></li>
