11.3. <rich:collapsiblePanel>

⁠11.3. `<rich:collapsiblePanel>`

The <rich:collapsiblePanel> component is a collapsible panel that shows or hides content when the header bar is activated. It is a simplified version of <rich:togglePanel> component.

⁠

Figure 11.4. <rich:collapsiblePanel>

⁠11.3.1. Basic usage

Basic usage requires the header content is specified either by the header attribute, or by the headerExpanded/headerCollapsed facets. Additionally the panel requires content to display when it is expanded. Content is added as child elements like a standard panel.

⁠11.3.2. Expanding and collapsing the panel

The switching mode for performing submissions is determined by the switchType attribute, which can have one of the following three values:

server: This is the default setting. The <rich:collapsiblePanel> component performs a common submission, completely refreshing the page. Only one panel at a time is rendered to the client side.
ajax: The <rich:collapsiblePanel> component performs an Ajax form submission, and only the content of the panel is refreshed. Only one panel at a time is rendered to the client side.
client: The <rich:collapsiblePanel> component changes the state on the client side without any additional requests being sent.

⁠11.3.3. Appearance

The appearance of the <rich:collapsiblePanel> component can be customized using facets. The headerExpanded and headerCollapsed CSS fclasses are used to style the appearance of the panel when it is expanded and collapsed respectively.

⁠11.3.4. `<rich:collapsiblePanel>` server-side events

The <rich:collapsiblePanel> component uses the following unique server-side events:

The PanelToggleEvent event occurs on the server side when the <rich:collapsiblePanel> component is expanded or collapsed in either the ajax or server modes. It can be processed using the panelTogglerListener attribute.

⁠11.3.5. JavaScript API

The <rich:collapsiblePanel> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:

switchPanel(): Switch the state of the collapsible panel (expanded or collapsed).

⁠11.3.6. Reference data

component-type: org.richfaces.CollapsiblePanel
component-class: org.richfaces.component.UICollapsiblePanel
component-family: org.richfaces.CollapsiblePanel
renderer-type: org.richfaces.CollapsiblePanelRenderer
handler-class: org.richfaces.view.facelets.html.CollapsiblePanelTagHandler

⁠11.3.7. Style classes and skin parameters

⁠

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

Class (selector)	Skin Parameters	Mapped CSS properties
`.rf-cp` This class defines styles for the collapsible panel itself.	`panelBorderColor`	color
	`generalBackgroundColor`	background
`.rf-cp-hdr` This class defines styles for the header of a collapsible panel.	`headerBackgroundColor`	background-color, border-color
	`headerTextColor`	color
	`headerWeightFont`	font-weight
	`headerFamilyFont`	font-family
	`headerSizeFont`	font-size
`.rf-cp-hdr-exp`, `.rf-cp-hdr-colps` These classes define styles for the header when the item is either expanded or collapsed.	No skin parameters.
`.rf-cp-gr` This class defines styles for a collapsible panel group.	No skin parameters.
`.rf-cp-b` This class defines styles for the body of a collapsible panel.	`generalTextColor`	color
	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size
`.rf-cp-ico` This class defines styles for the panel icon.	No skin parameters.
`.rf-cp-exp-ico` This class defines styles for the expanded icon for a panel.	No skin parameters.
`.rf-cp-ico-exp`, `.rf-cp-ico-colps` These classes define styles for the icon when the panel is either expanded or collapsed.	No skin parameters.
`.rf-cp-lbl` This class defines styles for the panel label.	No skin parameters.
`.rf-cp-lbl-exp`, `.rf-cp-lbl-colps` These classes define styles for the label when the panel is either expanded or collapsed.	No skin parameters.

⁠11.3.8. `<rich:panelToggleListener>`

Use the <rich:panelToggleListener> tag to register a PanelToggleListener class on a parent <rich:collapsiblePanel> component. The class provided as a listener must implement the org.richfaces.event.PanelToggleListener interface. The processPanelToggle method accepts an org.richface.event.PanelToggleEvent event as a parameter.