Tengo un menú vertical con submenus, el proceso que hace mi menú actual es que cada que uno da clic sobre la opción esta despliega un submenu, y se oculta hasta que el usuario vuelve a dar clic sobre en menú padre, como puedo hacer para que cuando de clic en otra opción del menú padre colapse el que este abierto, para no tener muchos submenus abierto y se vea mas orden, este es mi codigo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div class="sidebar" data-background-color="black" data-active-color="danger">
<div class="sidebar-wrapper">
<div class="logo">
<div style="margin:auto auto">
</div>
</div>
<ul class="nav">
<li>
<a href="#" data-toggle="collapse" data-target="#ordenesServicio" class="collapsed">
<p><i class="ti-user"></i> Menu 1<span class="ti-arrow-down"></span>
</p>
</a>
<div class="collapse" id="ordenesServicio" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#"><i class="ti-angle-right"></i>Opcion 1</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Opcion 2</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#toggleDemo" class="collapsed">
<p><i class="ti-user"></i> Menu 2<span class="ti-arrow-down"></span>
</p>
</a>
<div class="collapse" id="toggleDemo" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#"><i class="ti-angle-right"></i>Opcion 1</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Opcion 2</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Opcion 3</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#toggleDemonc" class="collapsed">
<p><i class="ti-user"></i> Menu 3<span class="ti-arrow-down"></span>
</p>
</a>
<div class="collapse" id="toggleDemonc" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#"><i class="ti-angle-right"></i>Opcion 1</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Opcion 2</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Opcion 3</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Opcion 4</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>