p tag will slide down but wont slide up

Have a question and answer system where the answer starts of hidden, then when the question is clicked, the answer slides down. This is working fine, but then I would like it so that if the question is then clicked again, the answer slides back up. At the moment it is just ignoring that command. The remove/add class is working so I cant think what else it can b开发者_StackOverflowe?

HTML: <h2 class="traverse">What subjects are covered in the Core Knowledge Sequence UK?</h2> <p class="traversing">The Core Knowledge Sequence UK is a guideline of the fundamental skills and content to cover in English, maths, history and geography, science, music and visual arts.</p>

Jquery:

$(".traverse").click(function(){
            $(this).next("p.traversing").slideDown();
            $(this).removeClass('traverse');
            $(this).addClass('traversed');
        });

$(".traversed").click(function(){
            $(this).next("p.traversing").slideUp();
            $(this).removeClass('traversed');
            $(this).addClass('traverse');
        });

The trick is you are adding the traversed class upon the user action... after you have attached the event handler to all matches with jQuery (thus the new element isn't caught)

I'd recommend a change of approach. Keep a class on the elements that can be toggled, and just slide up/down as needed using .toggle();

e.g.

$('.collapsible').toggle(function(){
    $(this).next('p.traversing').slideUp();
  }, function(){
    $(this).next('p.traversing').slideDown();
  }
);

Here's a demo: http://jsfiddle.net/7aVkx/1/

dont attach click handler multiple times instead use slideToggle()

$(".traverse").click(function(){
            $(this).next("p.traversing").slideToggle();
            $(this).removeClass('traverse');
            $(this).addClass('traversed');
        });

you could do a live click bind. as you are adding this class to the paragraph after the load, it wont find a reference to it.

$(".traversed").live("click",function(){});

Is there a reason why you want to change the class? An aternative might be to use slideToggle() and leave the class alone.

You would have to use .live for this since you (in your click handlers) constantly adding/removing classes that are used to select elements to handle. Doing just:

$(".traverse").click(....)

Doesn't "track" future elements that may have "traverse" class. It should work fine if you will use:

$(".traverse").live("click", ....)

$('p.traversing').slideUp();
$(".traverse").click(function() {
    $(this).removeClass('traverse').addClass('traversed');
    $(this).next("p.traversing").slideToggle();
});
$(".traversed").click(function() {
    $(this).next("p.traversing").slideToggle();
    $(this).removeClass('traversed').addClass('traverse');
});

You're setting the handler on all elements of class .traversed, but at that time your desired elements don't have that class.

Use .live instead:*

$(".traverse").live('click', function(){
        $(this).next("p.traversing").slideDown();
        $(this).removeClass('traverse');
        $(this).addClass('traversed');
    });

$(".traversed").live('click', function(){
        $(this).next("p.traversing").slideUp();
        $(this).removeClass('traversed');
        $(this).addClass('traverse');
    });

Live demo.

^{* "Description: Attach a handler to the event for all elements which match the current selector, now and in the future."}