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



<div id="flip"><table><td>Maria</td></table></div>
<div id="panel"><table><td>1.000</td></table></div>

<div id="flip"><table><td>José</td></table></div>
<div id="panel"><table><td>2.000</td></table></div>

Seguindo o código acima, eu preciso clicar em Maria e aparecer o valor abaixo (1.000), e o mesmo com José. Está funcionando perfeitamente quando clica em Maria, mas não para José. Como soluciono este problema?

3
  • Você está utilizando id que é um identificador único e somente o primeiro elemento encontrado no documento é selecionado, tente mudar para classe, exemplo <div class="flip"></div> e $('.flip') relacionada pt.stackoverflow.com/questions/39875/…
    – abfurlan
    Commented 23/05/2017 às 18:04
  • A diferença é que o meu original, ele oculta o linha debaixo e só quando clicada, ela aparece, e a sua edição faz ao contrário. Commented 23/05/2017 às 18:09
  • Veja a resposta, se é isso que pretende, veja que adicionei um $(this).next('.panel') para selecionar o próximo elemento, ou seja o
    – abfurlan
    Commented 23/05/2017 às 18:11

1 Resposta 1

1

Você está utilizando id que é um identificador único e somente o primeiro elemento encontrado no documento é selecionado, tente mudar para classe, exemplo:

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next(".panel").slideToggle("slow");
    });
});
.flip{
  background-color:red;
  cursor:pointer;
}
.panel{
  background-color:blue;
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip"><table><td>Maria</td></table></div>
<div class="panel"><table><td>1.000</td></table></div>

<div class="flip"><table><td>José</td></table></div>
<div class="panel"><table><td>2.000</td></table></div>

3
  • PERFEITO. Funcionou. Eu gostaria de saber, como deixar a linha com os números ocultas quando carrega a pagina e só apareça se clicado. O caminho inverso da tua alteração. Tem como? Commented 23/05/2017 às 18:12
  • @RafaelBrito tem sim, basta adicionar a propriedade display:none na classe .panel do CSS.
    – abfurlan
    Commented 23/05/2017 às 18:14
  • 100% AGORA. muito obrigado. Commented 23/05/2017 às 18:14

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 .