Outra forma é pegando o índice da classe .flip
clicada e aplicar ao mesmo índice da classe .panel
.
A vantagem desta forma sobre o .next()
é que o elemento .panel
não precisa ser irmão do elemento .flip
. O .next()
só funciona com elementos irmãos e que estejam após o elemento selecionado.
Por exemplo, se tiver a estrutura abaixo, o .next()
já não vai funcionar:
<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div>
<div class="panel">painel 1</div>
</div>
Note acima que a div.panel
não é irmã da div.flip
.
Pegando o índice, como falei, funciona em qualquer caso, pois cada índice da classe .flip
é "casada" com cada índice da classe .panel
.
Basta fazer isso:
$(document).ready(function(){
$(".flip").click(function(){
var idx = $(".flip").index(this); // pega o índice
$(".panel").eq(idx).slideToggle("slow");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div class="panel">painel 1</div>
<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div class="panel">painel 2</div>
O .index()
me retorna o índice do .flip
clicado e uso .eq()
para pegar o mesmo índice da classe .panel
. Muito simples!