Vertical stacked panels with accordion

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.

How to do it...

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

Get PrimeFaces Cookbook - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.