⁠11.2. <rich:accordion>

The <rich:accordion> is a series of panels stacked on top of each other, each collapsed such that only the header of the panel is showing. When the header of a panel is clicked, it is expanded to show the content of the panel. Clicking on a different header will collapse the previous panel and epand the selected one. Each panel contained in a <rich:accordion> component is a <rich:accordionItem> component.
⁠
A <rich:accordion> component containing three <rich:accordionItem> components

Figure 11.3. A <rich:accordion> component containing three <rich:accordionItem> components

⁠11.2.1. Basic usage

The <rich:accordion> component requires no attributes for basic usage. The component can contain any number of <rich:accordionItem> components as children. The headers of the <rich:accordionItem> components control the expanding and collapsing when clicked. Only a single <rich:accordionItem> can be displayed at a time. Refer to Section 11.2.8, “<rich:accordionItem>” for details on the <rich:accordionItem> component.

Note

All <rich:tabPanel> components should be wrapped in a form element when using either ajax or server mode, as usual for submitting components.

⁠11.2.2. Switching panels

The activeItem attribute holds the active panel name. This name is a reference to the name identifier of the active child <rich:accordionItem> component.
The switching mode for performing submissions is determined by the switchType attribute, which can have one of the following three values:
server
The default setting. Activation of a <rich:accordionItem> component causes the parent <rich:accordion> component to perform a common submission, completely refreshing the page. Only one panel at a time is rendered to the client side.
ajax
Activation of a <rich:accordionItem> component causes the parent <rich:accordion> component to perform an Ajax form submission, and the content of the panel is rendered. Only one panel at a time is rendered to the client side.
client
Activation of a <rich:accordionItem> component causes the parent <rich:accordion> component to perform updates on the client side. All the panels are rendered on the client side during the initial page render. JavaScript changes the styles such that one panel component becomes hidden while the other is shown.

⁠11.2.3. <rich:accordion> client-side events

In addition to the standard Ajax events and HTML events, the <rich:accordion> component uses the client-side events common to all switchable panels:
  • The itemchange event points to the function to perform when the switchable item is changed.
  • The beforeitemchange event points to the function to perform when before the switchable item is changed.

⁠11.2.4. <rich:accordion> server-side events

The <rich:accordion> component uses the server-side events common to all switchable panels:
  • The ItemChangeEvent event occurs on the server side when an item is changed through Ajax using the server mode. It can be processed using the ItemChangeListener attribute. Refer to Section 11.6.6, “<rich:itemChangeListener>” for details on the <rich:itemChangeListener> tag.

⁠11.2.5. JavaScript API

The <rich:accordion> component can be controlled through the JavaScript API. The JavaScript API provides the following functions, which are common to all switchable panels:
getItems()
Return an array of the items contained in the accordion control.
getItemsNames()
Return an array of the names of the items contained in the accordion control.
switchToItem(itemName)
Switch to and display the item identified by the itemName string passed as a parameter.
firstItem(), prevItem(), nextItem(), lastItem()
Get the name of the first item, the previous item, the next item, or the last item.

⁠11.2.6. Reference data

  • component-type: org.richfaces.Accordion
  • component-class: org.richfaces.component.UIAccordion
  • component-family: org.richfaces.Accordion
  • renderer-type: org.richfaces.AccordionRenderer
  • handler-class: org.richfaces.view.facelets.html.TogglePanelTagHandler

⁠11.2.7. Style classes and skin parameters

⁠

Table 11.2. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-ac
This class defines styles for the accordion control itself.
panelBorderColor
border-color
generalBackgroundColor
background
.rf-ac-itm-hdr
This class defines styles for the header of an accordion item.
panelBorderColor
border-bottom-color
headerBackgroundColor
background-color
headerTextColor
color
headerWeightFont
font-weight
headerFamilyFont
font-family
headerSizeFont
font-size
.rf-ac-itm-hdr-act, .rf-ac-itm-hdr-inact
These classes define styles for the header when the item is either active (expanded) or inactive (collapsed).
No skin parameters.
.rf-ac-itm-hdr-dis
This class defines styles for the header when it is disabled.
tabDisabledTextColor
color
.rf-ac-itm-gr
This class defines styles for an item group.
No skin parameters.
.rf-ac-itm-cnt
This class defines styles for the content of an accordion item.
panelBorderColor
border-bottom-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-ac-itm-ico
This class defines styles for the item icon.
No skin parameters.
.rf-ac-itm-exp-ico
This class defines styles for the expanded icon for an item.
No skin parameters.
.rf-ac-itm-ico-act, .rf-ac-itm-ico-inact
These classes define styles for the icon when the item is either active (expanded) or inactive (collapsed).
No skin parameters.
.rf-ac-itm-lbl
This class defines styles for the item label.
No skin parameters.
.rf-ac-itm-lbl-act, .rf-ac-itm-lbl-inact
These classes define styles for the label when the item is either active (expanded) or inactive (collapsed).
No skin parameters.

⁠11.2.8. <rich:accordionItem>

The <rich:accordionItem> component is a panel for use with the <rich:accordion> component. <rich:accordionItem> components can be added dynamically using iteration models with the <c:forEach> tag.

⁠11.2.8.1. Basic usage

Basic usage of the <rich:accordionItem> component requires the header attribute, which provides the text on the panel header. The panel header is all that is visible when the accordion item is collapsed.
Alternatively the header facet could be used in place of the header attribute. This would allow for additional styles and custom content to be applied to the tab.

⁠11.2.8.2. <rich:accordionItem> client-side events

In addition to the standard HTML events, the <rich:accordionItem> component uses the client-side events common to all switchable panel items:
  • The enter event points to the function to perform when the mouse enters the panel.
  • The leave event points to the function to perform when the mouse leaves the panel.

⁠11.2.8.3. Reference data

  • component-type: org.richfaces.AccordionItem
  • component-class: org.richfaces.component.UIAccordionItem
  • component-family: org.richfaces.AccordionItem
  • renderer-type: org.richfaces.AccordionItemRenderer