[jQuery] hide/show answer based on question click

[Brian Yanosik]

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.