Changing the color of the accordion panel tab

Question

I use the accordion panel. Inside the tabs, I have forms that are created programmatically. Each form has a submit button. Now I wanted to change the color of the tab if the form of this tab was submitted. Can I change the color of one specific tab and how can I do this job?

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

How to select node section tree from bean backup

Any help is appreciated.

Answer 1

You can use a tag titleStyleClasstag for this <p:tab>. For instance.

<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>

CSS completed , true. CSS .completed {} style.css, /resources <h:outputStylesheet name="style.css">.

.completed {
    background: pink;
}