Skip to main content
adicionou 1562 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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 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>

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 pouco mais rápido que o "slow" e mais lento que o "fast".

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>

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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 pouco mais rápido que o "slow" e mais lento que o "fast".