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


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

            <h:panelGrid columns="2" cellpadding="10">
                <h:outputText value="Name: " />
                <h:outputText value="#{}" 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"/>