Having an issue with this block of jQuery. I am making a little Q/A toggle thing that works by hiding the answer using a class '.open'. You can collapse the groups as well as the questions. The problem is since I have the question as a child of the group it's also toggling the open class on the '.group' class. How can I prevent this behavior?
<script type="text/javascript">
$(document).ready(function(){
$('.cFaq .group').click(function(){
$(this).toggleClass('open');
$('.group.open').get(0).scrollIntoView({behavior: 'smooth'});
});
$('.cFaq .question').click(function(){
$(this).toggleClass('open');
});
});
</script>
<div class="group open">
<h3>group title</h3>
<div class="question">
<p class="q">this is the question</p>
<div class="a">this is the asnwer</div>
</div>
</div>
<div class="group">
<h3>group title</h3>
<div class="question">
<p class="q">this is the question</p>
<div class="a">this is the asnwer</div>
</div>
</div>
