Accordion Panel - Model

Accordion can display dynamic number of tabs backed by a model. As tabs are generated on-the-fly it is easy to implement adding/removing tabs as well.

Name: Messi
Number: 10
Position: CF

Source

<p:accordionPanel value="#{tabBean.players}" var="player">
    <p:tab title="#{player.name}">
        <h:panelGrid columns="2" cellpadding="10">
            <p:graphicImage value="/images/barca/#{player.photo}" />

            <h:panelGrid columns="2" cellpadding="10">
                <h:outputText value="Name: " />
                <h:outputText value="#{player.name}" style="font-weight: bold"/>

                <h:outputText value="Number: " />
                <h:outputText value="#{player.number}" style="font-weight: bold"/>

                <h:outputText value="Position: " />
                <h:outputText value="#{player.position}" style="font-weight: bold"/>
            </h:panelGrid>

        </h:panelGrid>

    </p:tab>
</p:accordionPanel>