1

Eu estou utilizando a função toggle do jQuery, está funcionando perfeitamente, porém eu coloquei 12 divs com texto e quando eu clico em abrir somente uma, todas estão abrindo.

Segue o código do JavaScript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("span.seta-baixo").click(function(){
        $("p.perguntas-conteudo").toggle();
    });
});

</script>

O que eu quero é o seguinte, quando eu clicar em uma div, vai expandir o texto somente dela e quando eu abrir a outra div com outra informação de texto, vai fechar a anterior e abrir somente essa.

O que está acontecendo é que ao clicar no botão para abrir o texto, abre todas as div, ou seja, o toggle está pegando em todas.

1
  • cara edita a pergunta e cloca tb seu código HTML, vai facilitar pra te responder!
    – hugocsl
    Commented 1/11/2018 às 0:29

1 Resposta 1

0

Você pode pegar o índice da classe da seta clicada e aplicar o .toggle no respectivo índice da classe .perguntas-conteudo, já que cada seta corresponde a um p, então cada índice da classe da seta .seta-baixo corresponde ao mesmo índice da classe do p .perguntas-conteudo:

$(document).ready(function(){
    $("span.seta-baixo").click(function(){
        // pega o índice da seta clicada dentro da classe
        var idx = $(this).index(".seta-baixo");
        // pega o respectivo <p> pelo índice usando :eq
        var per = $("p.perguntas-conteudo:eq("+idx+")");
        // oculta todos os <p> visíveis exceto o relacionado à seta clicada
        $("p.perguntas-conteudo:visible").not(per).hide();
        // abre ou esconde o respectivo <p> da seta
        per.toggle();
    });
});
.seta-baixo{
   display: block;
}

.perguntas-conteudo{
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <span class="seta-baixo"><strong>Seta 1</strong></span>
   <p class="perguntas-conteudo">pergunta 1</p>
   <span class="seta-baixo"><strong>Seta 2</strong></span>
   <p class="perguntas-conteudo">pergunta 2</p>
</div>

1
  • Valeu! Muito Obrigado Commented 1/11/2018 às 0:48

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 .