Seu CSS tem um erro em :active
, onde deveria ser .active
. E para abrir os outros itens com .toggle
você pode usar .siblings()
(elementos irmãos).
É interessante ainda usar .preventDefault()
para cancelar o evento do clique no link.
$(document).ready(function(){
$('.list-widget .list-group-item.active').click(function(e){
e.preventDefault();
$(this).siblings().toggle(400);
});
});
.list-widget .list-group-item { display: none; }
.list-widget .list-group-item.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="list-group list-widget">
<a href="#" class="list-group-item active">Lista#01</a>
<a href="#" class="list-group-item">Item#01</a>
<a href="#" class="list-group-item">Item#02</a>
<a href="#" class="list-group-item">Item#03</a>
</div>
<div class="list-group list-widget">
<a href="#" class="list-group-item active">Lista#02</a>
<a href="#" class="list-group-item">Item#01</a>
<a href="#" class="list-group-item">Item#02</a>
<a href="#" class="list-group-item">Item#03</a>
</div>
Para ter o efeito tipo "sanfona", o .toogle()
deve ter um valor, seja
numérico em milissegundos ou "slow"
ou "fast"
. No caso acima usei 400
, que um valor intermediário entre o "slow"
(600
) e mais lento que o "fast"
(200
).
Usando .slideToggle()
O efeito fica bem melhor usando .slideToggle()
. Isso porque o .toggle()
, durante a animação, aumenta (ao mostrar) e reduz (ao esconder) a largura dos elementos.
Veja a diferença com .slideToggle()
:
$(document).ready(function(){
$('.list-widget .list-group-item.active').click(function(e){
e.preventDefault();
$(this).siblings().slideToggle(400);
});
});
.list-widget .list-group-item{ display: none; }
.list-widget .list-group-item.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="list-group list-widget">
<a href="#" class="list-group-item active">Lista#01</a>
<a href="#" class="list-group-item">Item#01</a>
<a href="#" class="list-group-item">Item#02</a>
<a href="#" class="list-group-item">Item#03</a>
</div>
<div class="list-group list-widget">
<a href="#" class="list-group-item active">Lista#02</a>
<a href="#" class="list-group-item">Item#01</a>
<a href="#" class="list-group-item">Item#02</a>
<a href="#" class="list-group-item">Item#03</a>
</div>