0

Preciso que assim que uma div for clicada (.titulo), exibir uma outra div que está dentro dela (.answer).

Aprendi a fazer utilizando o método do JQuery classToggle, assim que a div é clicada adiciona a classe hide, cuja a mesma no código CSS exibe ela.

Porém eu preciso de fazer isso para várias div iguais, só que quando clico em uma exibe todas as outras e eu quero que exiba somente a que foi clicada...

Código:

$(document).ready(function() {
    $(".titulo").click(function() {
        $(".answer").toggleClass("hide");
    });
});
.hide {
    opacity: 0;
    visibility: hidden;
    height: 35px;
    margin-top: -70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="question">
	<header>
		<div class="titulo">
			<h3 class="tittle faq">Como formatar / passar imagem?</h3>
			<img src="Imagens/mais.png" class="pam">
		</div></header>
	<div class="answer hide">
		<p>"TEXTO".</p>
	</div>
</article>

<article class="question">
	<header>
		<div class="titulo">
			<h3 class="tittle faq">Como trocar cartucho da impressora?</h3>
			<img src="Imagens/mais.png" class="pam">
		</div>
	</header>
	<div class="answer hide">
		<p>"TEXTO".</p>
	</div>
</article>

1 Resposta 1

1

Preciso que assim que uma div for clicada (.titulo), exibir uma outra div que está dentro dela (.answer).

Antes de mais nada, deve-se observar que a div.answer NÃO ESTÁ DENTRO da div.titulo. Não são nem mesmo elementos irmãos.

Entendido isso, vamos começar.

Pra selecionar apenas o elemento clicado, use o $(this). Em seguida, identificamos o seu elemento-pai com o método parent() e, por fim, vamos identificar o próximo elemento com o método next(), que por sua vez, é o div.answer. Daí vamos fazer o toggleClass nele.

Não considero a melhor forma. Mas, pelo seu código, funciona. A ideia não é refazer todo seu código, né?!

Segue código:

$(document).ready(function() {
    $(".titulo").click(function() {
        $(this).parent().next().toggleClass("hide");
    });
});
.hide {
    opacity: 0;
    visibility: hidden;
    height: 35px;
    margin-top: -70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="question">
	<header>
		<div class="titulo">
			<h3 class="tittle faq">Como formatar / passar imagem?</h3>
			<img src="Imagens/mais.png" class="pam">
		</div>
  </header>
	<div class="answer hide">
		<p>"TEXTO".</p>
	</div>
</article>

<article class="question">
	<header>
		<div class="titulo">
			<h3 class="tittle faq">Como trocar cartucho da impressora?</h3>
			<img src="Imagens/mais.png" class="pam">
		</div>
	</header>
	<div class="answer hide">
		<p>"TEXTO".</p>
	</div>
</article>

Leituras recomendadas:

jQuery - método .next()

jQuery - método .parent()

2
  • Amigão, valeeeeeu pela resposta. Eu sou iniciante na área e estou só me aventurando para aprender mais... Se você tiver uma solução melhor (refazer o código), me fala aí po... Guarda só pra você não hehehehe Commented 21/03/2020 às 0:47
  • @AdrielAlmeida Que bom que deu pra ajudar! Espero, mesmo, que tenha contribuído com seu aprendizado. Sobre refazer o código, não é esse o foco da sua pergunta. E outra, a comunidade não costuma aceitar bem esse tipo de pergunta. Acho que tem uma comunidade da plataforma Exchange apropriada para perguntas sobre "melhorar códigos". No mais, se tiver algum problema ou dúvida específica, aqui vai ser o lugar certo pra perguntar. Ahhh, se minha resposta resolveu seu problema, lembre-se de marcar depois. Abraço.
    – LipESprY
    Commented 21/03/2020 às 0:59

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 .