JQuery UI: Disable accordion tab?

Question

I have a JQuery UI accordion that contains different parts of the user workflow. I would like to disable accordion "tabs" that the user hasn't reached yet. (So if the user hasn't signed in yet, he can't yet publish content, etc.) Then, as the user completes the necessary steps, more tabs will become enabled.

Is there a way to do this? This doesn't work, even as a way to prevent any tabs from changing:

$("#accordion").accordion({
    changestart: function(event, ui) {
        return false;
    }
});

Answer 1

This seems like it should be easier. But here's a solution:

The first thing we need to keep track of is which panels can be legally opened:

// Keep an array of the indexes that the user can open. 
// [0,1] would allow ONLY the first and second panels
// to be opened
var available_indexes = [0,1];

Then, when you call your accordion, do it like this

$('#accordion').accordion({
    header: 'h3',
    change: function(event, ui) {
        var newIndex = $(ui.newHeader).index('h3');
        if (jQuery.inArray(newIndex, available_indexes) == -1) {
            var oldIndex = $(ui.oldHeader).index('h3');
            $(this).accordion( "activate" , oldIndex );
            alert('That panel is not yet available');
        }
    }
});

So then, if you want to allow the user to access the third panel, you would do:

available_indexes.push(2);