1

Na minha página eu tenho vários elementos que preferi esconder para não deixar o site muito grande, mas ao clicar em mostrar um, ele expande todos da página. Como eu faço para ele selecionar apenas o próximo elemento?

$(document).ready(function(){
        $(".flip").click(function(){
            $(".panel").slideToggle("slow");
        });
    });

Assim ta o JQuery e no código está assim:

    <div class="flip"><b><u>Expandir/Esconder</u></b></div>
    <div class="panel">

3 Respostas 3

3

Cara use o método .next() do jQuery junto com o seleto this, o this vai pegar apenas o elemento que vc clicou, e o next() vai selecionar o próximo elemento com a classe que vc definir

$(document).ready(function() {
  $(".flip").click(function() {
    $(this).next(".panel").slideToggle("slow");
  });
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div class="panel">
  111
</div>
<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div class="panel">
  222
</div>

Aqui tem a documentação oficial do .next() https://api.jquery.com/next/

2

Use $(this).next('.panel') no lugar de $(".panel"). Isso fará que seja acessado o próximo panel em relação ao elemento clicado, em vez de selecionar todos

4
  • Rapaz esse pontinhos das peguntas deram um UP ai hein! 😉💪
    – hugocsl
    Commented 20/11/2019 às 18:04
  • Tá falando da reputação? Também achei estranho, lembrava de ter 6k, um belo dia olho e tem 2k a mais. Deve ter dado um bug na SE, tava até olhando minha aba de reputação ontem pra ver da onde tinha saído isso
    – Costamilam
    Commented 20/11/2019 às 18:18
  • As resposta até semana passada valiam 5pts, agora passou para 10pts, ai foi retroativo, deram +5 para as perguntas antigas tb :D, levei 3.5k nessa rss
    – hugocsl
    Commented 20/11/2019 às 18:21
  • @hugocsl tô totalmente desatualizado shusauhusahuhsa
    – Costamilam
    Commented 20/11/2019 às 18:58
0

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!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .