Create paragraph fadetoggle with jquery

Question

I have some questions and answers and I want when a user clicked on question number 4, answer number 4 fade in and then if user clicked on question number 5, answer number 4 fade out and answer number 5 fade in and so... I've done this with one paragraph.but I can't do it for more than one paragraph. This is my code:

$("#content").ready(function(){
    $('p').css({display:'none'});
    $('a:first').click(function(){
        $( 'p:first' ).fadeToggle( "slow", "linear" );
});    
});

http://jsfiddle.net/mr_seven/kLxsS/

help me please thanks

I'm using joomla and now i have another problem:in text editor when i write a text, joomla automatically ads < p > tags. and now codes doesn't work.this is what happened after saving article:

<div id="content" class="faq">
    <p><a>question 1 ?</a></p>
    <p>answer 1</p>
    <p><a>question 2 ?</a></p>
    <p>answer 2 </p>
    <p><a>question 3 ?</a></p>
    <p>answer 3</p>
</div>

Answer 1

Because you also wanted the already opened answer to fadeOut, i set up a JSFiddle for you that does exactly that. Take a look: http://jsfiddle.net/kLxsS/6/

$(document).ready(function(){
    $('a').click(function(){
        $('.active').fadeToggle( "slow", "linear" ).removeClass('active');
        $(this).parent().find('p').fadeToggle( "slow", "linear" ).addClass('active');
    });    
});

This way, the active answer gets another class (active), so you can even style it different from the rest.

EDIT: I made another edit here: http://jsfiddle.net/kLxsS/9/ Now when you click on an anchor it fades in the answer and when you click the same one again, it fades out the answer. But, when you click on another anchor, while there is already an answer open it will fadeOut the open answer en fadeIn the new clicked answer.

Answer 2

EDIT: just seeing it wasn't what you were looking for...

Could be a solution:

DEMO jsFiddle

$(function () {
    $('#content p').hide();
    $('#content a').click(function () { 
        $(this).nextAll('p:first').fadeToggle("slow", "linear");
    });
});

Another one would be to target element depending its index:

$('a').click(function () {
        $('p').eq($(this).index('a')).fadeToggle("slow", "linear")
    });

Answer 3

use data-rel attribute:

$("#content").ready(function () {
$('p').css({
    display: 'none'
});

$('a').click(function () {
    $('p[data-rel='+
    $(this).attr('data-rel')+']').fadeToggle("slow", "linear")
});
});

here a fiddle http://jsfiddle.net/btordz/kLxsS/1/