Hi everyone,

Here I have four dynamic lists : http://baiadesign.com/files/tuts/tutorial_01/

The first list CATEGORY1 contains items of the database table CATEGORY1.

Selecting one of those items reloads the second list CATEGORY2 with subcategories belonging to the selected CATEGORY1. I hope that makes sense .. !

And the same with the following lists.

My problems is that I want an Ajax loading icon appearing on all lists below the one the user just selected. If a CATEGORY1 is selected I want a loading icon appearing on CATEGORY2, 3 and 4.

If CATEGORY2 is selected I want a loading icon on CATEGORY3 and 4.

For now I have this code :

Code:
$('#category1').ajaxStart(function() {
        $('#x2').show(); 
        }).ajaxComplete(function() {
        $('#x2').hide();
    });
    
    $('#category2').ajaxStart(function() {
        $('#x3').show(); 
        }).ajaxComplete(function() {
        $('#x3').hide();
    });
    
    $('#category3').ajaxStart(function() {
        $('#x4').show(); 
        }).ajaxComplete(function() {
        $('#x4').hide();
    });
It works only when selecting CATEGORY1 and only once !

Any ideas ?