Changing the colour of a tab of an accordion panel

Question

I'm using primefaces' accordion panel. Inside the tabs i have forms which are created programmatically. Each form has a submit button. Now I wanted to change the colour of a tab, if the form of this tab has been submitted. So is it possible to change the color of one specific tab and how could I manage to make this work?

I think i have to use different style classes as mentioned here but I'm not quite sure how to use them.

How to highlight a primefaces tree node from backing bean

Any help is appreciated

Answer 1

You can use the titleStyleClass of the <p:tab> tag for this. E.g.

<p:accordionPanel>
    <p:tab title="Step 1" titleStyleClass="#{bean.step1Completed ? 'completed' : ''}">
        ...
    </p:tab>
    <p:tab title="Step 2" titleStyleClass="#{bean.step2Completed ? 'completed' : ''}">
        ...
    </p:tab>
    <p:tab title="Step 3" titleStyleClass="#{bean.step3Completed ? 'completed' : ''}">
        ...
    </p:tab>
</p:accordionPanel>

This will set the CSS style class of the tab to completed whenever the condition returns true. You can just specify the desired CSS in the .completed {} style class in your own style.css file which you put in /resources folder and include by <h:outputStylesheet name="style.css">.

.completed {
    background: pink;
}