A container component, accordionPanel provides the ability to group multiple tabs. In this recipe, we will create accordion panels generated with dynamic content and AJAX behaviors added.
A basic definition of the accordion panel with two panels would be as follows:
<p:accordionPanel>
<p:tab title="Volkswagen CC">
<h:panelGrid columns="2" cellpadding="10">
<h:graphicImage library="images"
name="autocomplete/CC.png" />
<h:outputText value="The Volkswagen CC (also known as the
Volkswagen Passat CC) is a four-door coupé version of
the Volkswagen Passat." />
</h:panelGrid>
</p:tab>
<p:tab title="Volkswagen Golf">
<h:panelGrid columns="2" cellpadding="10">
<h:graphicImage library="images"
name="autocomplete/Golf.png" />
<h:outputText value="The Volkswagen Golf is a small
family car manufactured by...