Hide/display elements with Jquery

Question

I need it as soon as a div is clicked (.titulo), display another div that’s inside of her (.answer).

I learned to do using the Jquery method classToggle, as soon as the div is clicked adds class hide, whose the same in the CSS code displays it.

But I need to do it for several div equal, only when I click on one it displays all the others and I I want it to show only what was clicked...

Code:

$(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>

Answer 1

I need it as soon as a div is clicked (.titulo), display another div that’s inside of her (.answer).

First of all, it should be noted that the div.answer IS NOT INSIDE of div.titulo. They’re not even brother elements.

Understood that, let’s get started.

To select only the clicked element, use the $(this). We then identify your parent element with the method parent() and, finally, we will identify the next element with the method next(), which in turn is the div.answer. Then we’ll do the toggleClass in it.

I do not consider the best form. But, by your code, it works. The idea is not to redo all your code, right?!

Follows code:

$(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>

Recommended readings:

jQuery - method . next()

jQuery - method . Parent()