[jQuery] hide/show answer based on question click
I am very new to jquery and just can't wrap my head around this. It is probably something very basic and I apologize in advance.
I have a list of questions and answers, the answers showing when a question is clicked the answer with hide/show and the parent div will change class.
I have come up with the following but it don't seem to work (it only hides answers.)
<script type="text/javascript">
$(document).ready(function(){
$(".question").click(function(){
var $this = $(this);
if( $this.prev().is('.qa') ) {
$this.next().slideDown("slow");
$this.prev().removeClass('qa');
$this.prev().addClass('qa-answer');
}
else {
$this.next().slideUp("slow");
$this.prev().removeClass('qa-answer');
$this.prev().addClass('qa');
}
return false;
});
});
</script>
<div class="qa">
<span class="question">This is the question</span>
<span class="answer">this is the answer</span>
</div>
<div class="qa">
<span class="question">This is the question</span>
<span class="answer">this is the answer</span>
</div>
Also is there a way to loop through all answer classes on the page and hide them? I am looking for accessibility to show all answers if the user doesn't' have javascript enabled.
Thank you in advance.