Adding/Removing Active Class Onclick

Question

I'm trying to add an "active" class to the h3 with jQuery once the heading has been clicked and have it be removed when another h3 is clicked. I've tried a many examples here on stackoverflow but cannot get the class to add.

Here is an example of my code:

<div id="qa-faq0" class="qa-faq cf">
<h3 class="qa-faq-title"><a class="qa-faq-anchor" href="#">Frequently Asked Question #1</a></h3>

<div class="qa-faq-answer" style="display: none;"><p>Frequently Asked Question #1 Content Goes Here</p>

</div>
</div>

Thanks in advance!

Answer 1

Try this http://jsfiddle.net/aamir/6ARUq/1/

$(function(){
    var $h3s = $('h3').click(function(){
        $h3s.removeClass('active');
        $(this).addClass('active');
    });
});

OR http://jsfiddle.net/aamir/6ARUq/2/

$(function(){
    $('h3').click(function(){
        $('h3.active').removeClass('active');
        $(this).addClass('active');
    });
});