Actualmente mi código funciona cuando cada vez que le das clic a un label se despliegue la lista de sub titulos y de igual manera dentro de esta lista hay otra la lista de subtitulos, lo que quiero saber es como hacer para que cuando se despliegue uno se cierre el otro y así sucesivamente.
Dejo mi codigo que esta funcionando hasta el momento pero esto solo hace que puedan desplegar los que desees pero al seleccionar otro label no se oculta el despliegue anterior.
Agradecería me puedan ayudar por favor.
$("label.title-item").click(function() {
// Buscar el siguiente elemento por clase
$(this).next(".desplegable-1").toggleClass("active-desp");
});
$("label.title-sub").click(function() {
// Buscar el siguiente elemento por clase
$(this).next(".desplegable-2").toggleClass("active-desp2");
});
.desplegable-1,.desplegable-2 {
display:none;
}
.active-desp, .active-desp2{
display:block;
}
input[type="checkbox"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<input type="checkbox" id="A"/>
<label for="D" class="title-item">Titulo 3</label>
<ul class="desplegable-1">
<li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
<li class="sub-li"><a href="#">Sub titulo 2</a></li>
<li class="sub-li-1">
<div class="sub-item">
<input type="checkbox" id="A-A"/>
<label for="A-A" class="title-sub">Lista de Sub titulos</label>
<ul class="desplegable-2">
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>
</ul>
</div>
</li>
<li class="sub-li"><a href="#">Sub titulo 3</a></li>
</li>
</ul>
</div>
<div class="item">
<input type="checkbox" id="B"/>
<label for="D" class="title-item">Titulo 2</label>
<ul class="desplegable-1">
<li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
<li class="sub-li"><a href="#">Sub titulo 2</a></li>
<li class="sub-li-1">
<div class="sub-item">
<input type="checkbox" id="B-A"/>
<label for="B-A" class="title-sub">Lista de Sub titulos</label>
<ul class="desplegable-2">
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>
</ul>
</div>
</li>
<li class="sub-li"><a href="#">Subtitulo3</a></li>
</li>
</ul>
</div>
<div class="item">
<input type="checkbox" id="B"/>
<label for="D" class="title-item">Titulo 1</label>
<ul class="desplegable-1">
<li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
<li class="sub-li"><a href="#">Sub titulo 2</a></li>
<li class="sub-li-1">
<div class="sub-item">
<input type="checkbox" id="B-A"/>
<label for="B-A" class="title-sub">Lista de Sub titulos</label>
<ul class="desplegable-2">
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
<li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>
</ul>
</div>
</li>
<li class="sub-li"><a href="#">Sub titulo 3</a></li>
</li>
</ul>
</div>