111

PrimeFaces accordionPanel

It is a container component which displays vertically stacked panels. It is used to display data in accordion format. We can switch anytime from one item to another just by clicking on that item. It is useful when user want to see single item at a time from the collection.

PrimeFaces provides <p:accordionPanel> component to create accordion in JSF application.

It also has various attributes that are tabled below.

AccordionPanel Attributes

Attribute	Default value	Type	Description
id	null	String	It is an unique identifier of the component.
activeIndex	false	String	It is used to set Index of the active tab.
style	null	String	It is used to set inline CSS of the container element.
onTabChange	null	String	It is used to call script when an inactive tab is clicked.
onTabShow	null	String	It is used to call client side script when a tab gets activated.
onTabClose	null	String	It is used to call client side script to invoke when a tab is closed.
dynamic	false	Boolean	It defines the toggle mode.
cache	true	Boolean	It defines if activating a dynamic tab should load the contents from server again.
value	null	List	It takes list to iterate to display dynamic number of tabs.
var	null	String	It is a name of iterator to use in a dynamic number of tabs
tabController	null	MethodExpr	It is used to set server side listener to decide whether a tab change or tab close should be allowed.

Example

Here, in the following example, we are implementing <p:accordionPanel> component. This example contains the following files.

JSF File

// accordian.xhtml

Output: