This is my example but the other li does not disappear when another is activated
- What my code does, as you can see in the example, makes its drop-down submenu and hides it, among other things, but I was seeing how to activate them
<li>
if it could, but then I had an error that when the other one is activated, it is no longer deactivated, how can I solve all this. - makes a submenu hiding some that it knows of active code with bootstrap
- But when you click it activates
- But clicking on another
<li>
does not deactivate the previous one
any suggestion
.icon-left{
float: left;
margin-right: 10px;
}
.icon-right{
float: right;
margin-left: 10px;
}
<html>
<head>
<title>Members Area</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="../styles/stylesIndex.css" >
<script src="js/main.js"></script>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="../fonts/font-awesome/css/font-awesome.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-3 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- Personas -->
<div class="panel panel-default">
<ul class="nav nav-pills nav-stacked">
<li id="li" class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true" id="persona">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1"
aria-expanded="false" aria-controls="collapse1">
<i class="fa fa-users icon-left"></i>Personas<span
class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
</a>
</li>
</ul>
<div style="height: 0px;" aria-expanded="false" id="collapse1" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading1">
<div>
<ul class="nav nav-list submenu">
<li><a href="#"><i class="ti-angle-right"></i>Empleados</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Guardia</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Visitantes</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Vehiculos-->
<div class="panel panel-default">
<ul class="nav nav-pills nav-stacked">
<li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2"
aria-expanded="false" aria-controls="collapse2">
<i class="fa fa-car icon-left"></i>Vehiculos<span
class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
</a>
</li>
</ul>
<div style="height: 0px;" aria-expanded="false" id="collapse2" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading2">
<div>
<ul class="nav nav-list">
<li><a href="#"><i class="ti-angle-right"></i>Vehiculos</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Escaleras</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Ingresos y salidas-->
<div class="panel panel-default">
<ul class="nav nav-pills nav-stacked">
<li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3"
aria-expanded="false" aria-controls="collapse2">
<i class="ti-user glyphicon glyphicon-sort icon-left"></i>Ingresos y Salidas<span
class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
</a>
</li>
</ul>
<div style="height: 0px;" aria-expanded="false" id="collapse3" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading2">
<div>
<ul class="nav nav-list">
<li><a href="#"><i class="ti-angle-right"></i>Vehiculos</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Visitantes</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Sucursales-->
<div class="panel panel-default">
<ul class="nav nav-pills nav-stacked">
<li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4"
aria-expanded="false" aria-controls="collapse2">
<i class="ti-user glyphicon glyphicon-equalizer icon-left"></i>Sucursales<span
class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
</a>
</li>
</ul>
<div style="height: 0px;" aria-expanded="false" id="collapse4" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading2">
<div>
<ul class="nav nav-list">
<li><a href="#"><i class="ti-angle-right"></i>Sucursal</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Cooperativa</a>
</li>
<li><a href="#"><i class="ti-angle-right"></i>Municipio</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Cuentas-->
<div class="panel panel-default">
<ul class="nav nav-pills nav-stacked">
<li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="false">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5"
aria-expanded="false" aria-controls="collapse2"><i
class="glyphicon glyphicon-user icon-left"></i>Cuentas
</a>
</li>
</ul>
<div style="height: 0px;" aria-expanded="false" id="collapse5" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading2">
</div>
</div>
<!-- Reportes-->
<div class="panel panel-default">
<ul class="nav nav-pills nav-stacked">
<li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="false">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse6"
aria-expanded="false" aria-controls="collapse2"><i class="fa fa-book icon-left"></i>Reportes
</a>
</li>
</ul>
<div style="height: 0px;" aria-expanded="false" id="collapse6" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading2">
</div>
</div>
<!-- Generardor Qr-->
<div class="panel panel-default">
<ul class="nav nav-pills nav-stacked">
<li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="false">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse7"
aria-expanded="false" aria-controls="collapse2"> <i class="fa fa-qrcode icon-left"> </i>Reportes
</a>
</li>
</ul>
<div style="height: 0px;" aria-expanded="false" id="collapse7" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="heading2">
</div>
</div>
</div>
</div>
</body>
</html>
You need to use javascript or jQuery. Something like that: