Question

This is my first post, and first please forgive me for my poor english.

I have a problem I really can’t fix:

I have a <table> of questions,

1. the first question is visible (class:visible), the others are hidden (class:hidden)

           $(document).ready(function(){
           $('.hidden').hide();
   

2. When people click on the first question, I want the second question to appear (and the first question to turn to grey, using a ‘done’ class).

$('.visible:not(.done)').click(function(){ 
                $(this).addClass('done'); 
                $('.hidden:first').toggle(500).removeClass('hidden').addClass('visible');
            })

The first question is now done (class:done) and the 2nd question should be the only one to react to a click(), and so on… But it doesn’t work: the other <tr> appear only when I click on the 1st <tr>.

Can someone give me a hand on this problem ?
Thank you.

Answer 1

Since you are adding the classes dynamically and your click event handler is a class selector based you will have to use .live() event.

$('.visible:not(.done)').live("click", function(){ 
    $(this).addClass('done'); 
    $('.hidden:first').toggle(500).removeClass('hidden').addClass('visible');
});

Working Demo