jquery toggle visibility
<p>I'm tyring to show/hide the content of a link when it's clicked. much like what you see in FAQ pages. Basically I want to get the data-* of the clicked link and display it's content. This is what I've done but it still doesn't work :(.</p>

<p>My html is as follows:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a data-faq="1" href="#question"&gt; + first question product?&lt;/a&gt;&lt;/li&gt;
        &lt;p  data-faq="1" class="hidden"&gt;my content&lt;/p&gt;

    &lt;li&gt;&lt;a data-faq="2" href="#question"&gt;+ More lorem?&lt;/a&gt;&lt;/li&gt;
        &lt;p data-faq="2" class="hidden"&gt;my content&lt;/p&gt;

&lt;/ul&gt;​
</code></pre>

<p>and jquery like this:-</p>

<pre><code> $('.hidden').hide();
 $("#question").click(function(){

 var activeFaq = $(this).attr("data-faq");    

    //show the content of the active faq
    $(activeFaq).toggle();
return false;
});

​
</code></pre>

<p>this is the fiddle:- <a href="http://jsfiddle.net/8EJDc/" rel="nofollow">http://jsfiddle.net/8EJDc/</a>
again I'd like to toggle the <code>+</code> to <code>-</code> upon the toggle click and vice versa</p>
