Para ter o efeito tipo "sanfona", o
.toogle()
deve ter um valor, seja numérico em milissegundos ou"slow"
ou"fast"
. No caso acima usei400
, que é um pouco mais rápido quevalor 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>