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

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Accordion Panel</title>
</h:head>
<h:body>
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<h3 style="margin-top:0">Select a Course</h3>
<p:accordionPanel>
<p:tab title="Java The Programming Language">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/java.png" />
<h:outputText
value="This program includes Java core concepts and collection framework." />
</h:panelGrid>
</p:tab>
<p:tab title="Spring a Java Framework">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/spring.png" />
<h:outputText value="It is a Java Framework. It is designed to make web applications." />
</h:panelGrid>
</p:tab>
<p:tab title="Python a Programming Language">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="images/courses/python.png" />
<h:outputText value="It is a multipurpose programming language. provides extensive tools." />
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
</h:body>
</html>

Output: