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 <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!doctype html> <html lang="es"> <head> <meta charset="utf-8" /> <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png"> <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title></title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> <meta name="viewport" content="width=device-width" /> <!-- Bootstrap core CSS --> <link href="../Content/css/bootstrap.min.css" rel="stylesheet" /> <!-- Animation library for notifications --> <link href="../Content/css/animate.min.css" rel="stylesheet" /> <!-- Paper Dashboard core CSS --> <link href="../Content/css/paper-dashboard.css" rel="stylesheet" /> <!-- CSS for Demo Purpose, don't include it in your project --> <link href="../Content/css/demo.css" rel="stylesheet" /> <!-- Fonts and icons --> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'> <link href="../Content/css/themify-icons.css" rel="stylesheet" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> </head> <body> <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"><center><img src="../Images/logofb.png" / width="80px" height="40px"></center></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 class="main-panel"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar bar1"></span> <span class="icon-bar bar2"></span> <span class="icon-bar bar3"></span> </button> <a class="navbar-brand" href="#">Sistema de Garantías</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <ul class="dropdown-menu"> <li><a href="../cerrarSesion">Cerrar sesión</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="header"> <!-- <h4 class="title">Users Behavior</h4> <p class="category">24 Hours performance</p>--> </div> <div class="content"> <div class="container-fluid" id="maximoPagina"> </div> <div id="chartHours" class="ct-chart"></div> <div class="footer"> <hr> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container-fluid"> </div> </footer> </div> </div> </body> <!-- Core JS Files --> <script src="../Scripts/js/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <script src="../Scripts/js/bootstrap.min.js"></script> <script src="../Scripts/EventosJS.js"></script> </html> <!-- end snippet -->