Show/hide toggle, and adding classes
<p>I'm creating an FAQ page. </p>

<p>I want to toggle the answers open and closed. I have that working using jquery. </p>

<p>I also want to add a class (.active) to the selector that is "open". I can add the class to the parent. </p>

<p>My problem is this: I need to use unclassed elements, because the end-user will not understand adding classes. It needs to be un-styled block elements. So it looks like this:</p>

<pre><code>&lt;h3 class="active"&gt;Activator&lt;/h3&gt;
  &lt;p&gt;show&lt;/p&gt;
&lt;h3&gt;Activator&lt;/h3&gt;
  &lt;p&gt;hide&lt;/p&gt;
&lt;h3&gt;Activator&lt;/h3&gt;
  &lt;p&gt;hide&lt;/p&gt;
etc... 
</code></pre>

<p>When the script adds the class .active to the h3 that is clicked, it adds the class .active to ALL the h3 tags. </p>

<p>Here is my code: </p>

<pre><code>$(document).ready(function() {
    $('.content p').hide();
    $('h3').click(function(){
        $(this).next("p").toggle(250);
    });
    $(".content h3").click(function(){
        $(".content h3").toggleClass("active");
    });
});
</code></pre>

<p>Link: <a href="http://www.wo.redpointdesign.ca/about/faq/" rel="nofollow">working demo/site</a>
Thank you in Advance. </p>
