Question

jQuery is not working the way it should and is completely ignoring the logic.

If I click a link, it shows up the given description, and fades the other menus.
If I click the same link again, it should hide that description, and fade the other links back in.

But instead it just hides the text, and doesn’t fade them back in.
When running the code alone from the console and when you click on the whitespace next to the paragraphs, it works just fine.

Site for reference

jQuery:

    $('a[class]').click(function(){
    var clas = $(this).attr('class');
        $('#'+clas.substring(0,2)).fadeTo('fast',1).removeClass('faded');
        $('p:not(#'+clas.substring(0,2)+')').fadeTo('fast',0.3);
        $('.ans:visible').toggle('slow');
        $('#'+clas.substring(0,2)+'a'+':hidden').fadeIn('slow');
        $('p:not(#'+clas.substring(0,2)+')').addClass('faded');
        return false;
    });
    $('p:not(p.faded)').click(function(){
        $('.ans:visible').toggle('slow');
        $('p[class="faded"]').fadeTo('fast',1).removeClass('faded');
    });

HTML:

    <p id="q1">1. <a class="q1">Nem látom a kedvenc karakterem, hozzá tudod adni?</a>
    <br>
    <span id="q1a" style="display:none;" class="ans">
        Persze. Írj egy e-mail-t a <a href="mailto:[e-mail]?subject=MLP Today Karakterkérés" target="_blank">[e-mail]</a> címre a karakter nevével.
        <br>
        <span style="color:red">OC-kat és fillyket NEM adok hozzá.</span>
    </span>
    </p>

    <p id="q2">2. <a class="q2">Hogyan tudok karaktert választani?</a>
    <br>
    <span id="q2a" style="display:none;" class="ans">
        Látogass el a <a href="../../img/?from=faq_hu">Karakterválasztás</a> oldalra, ahol kiválaszthatod a kedvenced.
        <br>
        Haználhatod továbbá a "<i>Véletlenszerű karakter</i>" linket is.
    </span>
    </p>

    <p id="q3">3. <a class="q3">Mi ennek az oldalnak a célja/alapötlete?</a>
    <br>
    <span id="q3a" style="display:none;" class="ans">
        Eredetileg a <a href="http://milyennapvanma.hu/" target="_blank">milyennapvanma.hu</a> weboldal pónisított változataként indult,
        <br>
        de azóta már nagy mértékben továbbfejlődött az oldal.
    </span>
    </p>

Answer 1

I admire your self-confidence: your code doesn’t work so you assume the problem is with jQuery.

In your code, this statement:

$('p:not(p.faded)').click(function(){

…binds a click handler to any elements that don’t have the "faded" class at that moment. Which would be all elements since none are faded initially. If you want it to apply only to elements that have not later had that class added you need to use a delegated handler which you assign via .on() (or .delegate() if using jQuery older than 1.7, or .live() if using a ridiculously old jQuery):

$(document).on('click', 'p:not(p.faded)'), function() {

Ideally you wouldn’t bind the handler to document, you’d use the closest anscestor of the paragraphs in question, but since you haven’t shown that much markup I’ll leave that part to you.

Also though, you return false; from your click handler on the anchor elements, which prevents the click event from propagating up to the paragraphs anyway.

However, I think you’re making the whole thing more complicated than you need to. The following code gets the job done:

var $questions = $('p'); // add class selectors here

$questions.click(function(){
   var $this = $(this),
       isOpen = $this.hasClass('open');

   $this.fadeTo('fast',1).toggleClass('open',!isOpen)
        .find('span.ans').toggle('slow');
   $questions.not(this).fadeTo('fast', isOpen ? 1 : 0.2)
                       .removeClass('open')
                       .find('span.ans').hide('slow');
});

​
That is, when any paragraph is clicked, figure out whether it already has the answer open. Then make sure the clicked one is visible, and toggle its answer. Then take all of its sibling paragraphs and fade them in or out as appropriate and hide their answer.

Where I’ve put the comment “add class selectors here” it would be good to add a class to identify which paragraphs in your document are the questions.

Demo: http://jsfiddle.net/DxFDP/2