Muy buenas, estoy usando este menú de boostrap. https://bootsnipp.com/snippets/featured/vertical-affix-menu-css-only
<div class="row affix-row">
<div class="col-sm-3 col-md-2 affix-sidebar">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" id="sidenav01">
<li class="active">
<a href="#" data-toggle="collapse" data-target="#toggleDemo0" class="collapsed">
<h4>
Control Panel
<br>
<small>IOSDSV <span class="caret"></span></small>
</h4>
</a>
<div class="collapse" id="toggleDemo0" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#">ProfileSubMenu1</a></li>
<li><a href="#">ProfileSubMenu2</a></li>
<li><a href="#">ProfileSubMenu3</a></li>
</ul>
</div>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-cloud"></span> Submenu 1 <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDemo" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#">Submenu1.1</a></li>
<li><a href="#">Submenu1.2</a></li>
<li><a href="#">Submenu1.3</a></li>
</ul>
</div>
</li>
<li class="active">
<a href="#" data-toggle="collapse" data-target="#toggleDemo2" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-inbox"></span> Submenu 2 <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDemo2" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#">Submenu2.1</a></li>
<li><a href="#">Submenu2.2</a></li>
<li><a href="#">Submenu2.3</a></li>
</ul>
</div>
</li>
<li><a href="#"><span class="glyphicon glyphicon-lock"></span> Normalmenu</a></li>
<li><a href="#"><span class="glyphicon glyphicon-calendar"></span> WithBadges <span class="badge pull-right">42</span></a></li>
<li><a href=""><span class="glyphicon glyphicon-cog"></span> PreferencesMenu</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>```
El problema que tengo es que cuando está en vista movil, me gustaría que todo el menu se colapsara al pulsar sobre cualquier opción. Necesito esto por que es algo incomodo el menu cuando esta en vista movil, ocupa muucha pantalla en vertical.