The rich:collapsiblePanel component is fully analogous to a simple rich:panel component. Except that it can be collapsed, and expanded. In the collapsed state only the header is shown and in expanded state the complete panel.
As with most of switchable components it has three switch types for switching between states - ajax, server and client. See the rich:togglePanel for details.
Here is simple panel in client mode:
And that panel switched by ajax and closed by default:
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:form id="form"> <p> <b>Here is simple panel in client mode:</b> </p> <rich:collapsiblePanel header="Overview" switchType="client"> <h:graphicImage value="/images/icons/common/rf.png" style="float:right" alt="rf" /> RichFaces is a component library for JSF and an advanced framework for easily integrating AJAX capabilities into business applications. <ul> <li>100+ AJAX enabled components in two libraries</li> <li>a4j: page centric AJAX controls</li> <li>rich: self contained, ready to use components</li> <li>Whole set of JSF benefits while working with AJAX</li> <li>Skinnability mechanism</li> <li>Component Development Kit (CDK)</li> <li>Dynamic resources handling</li> <li>Testing facilities for components, actions, listeners, and pages</li> <li>Broad cross-browser support</li> <li>Large and active community</li> </ul> </rich:collapsiblePanel> <p> <b>And that panel switched by ajax and closed by default:</b> </p> <rich:collapsiblePanel header="JSF 2 and RichFaces 4" expanded="false" switchType="ajax"> <p>We are working hard on RichFaces 4.0 which will have full JSF 2 integration. That is not all though, here is a summary of updates and features:</p> <ul> <li>Redesigned modular repository and build system.</li> <li>Simplified Component Development Kit with annotations, faces-config extensions, advanced templates support and more..</li> <li>Ajax framework improvements extending the JSF 2 specification.</li> <li>Component review for consistency, usability, and redesign following semantic HTML principles where possible.</li> <li>Both server-side and client-side performance optimization.</li> <li>Strict code clean-up and review.</li> </ul> </rich:collapsiblePanel> </h:form> </ui:composition>
Note: In ajax and server modes the PanelToggleEvent is queued and can be handled using a Listener defined via the toggleListener attribute
