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

The tab can be easily disable as below:

<p:tab title="First Tab Title" **disabled=”true”**>

To enable it you can use javascript to enable it again.

Answer 2

Diego Augusto Molina nailed it. ui-state-disabled class is the way to go: http://api.jqueryui.com/theming/css-framework/

Consider this piece of code that allows user go back, but not go to next accordion tab. We do it only programmatically, after proper validation:

function disableAccordionNextTabs () {
    var $accordion  = $(".accordion");
    var active      = $accordion.accordion('option', 'active');
    var $headers    = $accordion.find($accordion.accordion('option', 'header'));

    $headers.addClass('ui-state-disabled');
    for (var i = active; i >= 0; i--) {
        $headers.eq(i).removeClass('ui-state-disabled');
    }
}