JSFiddle - React, Tailwind, and code Playground
HTML
<div class="faq-block">
<h3 class="question">
This would be the question text?
</h3>
<div class="answer">Yes, it would be. And this would be the answer. Writing dummy content is hard.</div>
</div>
<div class="faq-block">
<h3 class="question">
Oh hey, another question?
</h3>
<div class="answer">Stop writing sentences as questions. Nobody likes upspeak.</div>
</div>
CSS
.question:hover {
cursor: pointer;
opacity: 0.6;
}
.answer {
display: none;
}
.faq-block:first-of-type .answer {
display: block;
}
JavaScript
jQuery(document).ready(function ($) {
$('.question').click(function () {
$(this).next().animate({
// The combo of height and opacity gives a nice open-and-fade effect
height: 'toggle',
opacity: 'toggle',
});
});
});