0

Vi uma função toggle show/hide (evento click) no w3schools e gostaria de utilizar para diferentes classes, mas não quero ficar repetindo a função para cada class. No exemplo abaixo, eu quero mostrar/esconder o conteúdo 1 quando clicar no button 1, e mostrar/esconder o conteúdo 2 quando clicar no button 2 sem repetir todo o script (assim posso adicionar em quantas class quiser).

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".teste1").click(function(){
    $(".menor1").toggle();
  });
});
</script>
</head>
<body>

<button class="teste1">Mostrar/ocultar conteúdo do parágrafo 1</button>

<p class="menor1">Este é o conteúdo 1</p>

<button class="teste2">Mostrar/ocultar conteúdo do parágrafo 2</button>

<p class="menor2">Este é o conteúdo 2</p>

</body>
</html>

1 Resposta 1

0

No caso desse exemplo em específico vc pode usar o método .next, ele vai pegar apenas o próximo elemento, por exemplo .next("p") pega o primeiro p depois do button. A dica que te dou é entender bem como funcionam os seletores, para saber como vc "pega" os elementos que vc quer dentro do DOM, eles são bem parecidos com os seletores CSS e está tudo na documentação, como no caso do .next()

$(document).ready(function(){
  $("button").click(function(){
    $(this).next("p").toggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>


<button class="teste1">Mostrar/ocultar conteúdo do parágrafo 1</button>

<p class="menor1">Este é o conteúdo 1</p>

<button class="teste2">Mostrar/ocultar conteúdo do parágrafo 2</button>

<p class="menor2">Este é o conteúdo 2</p>

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 .