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>