SimpleTogglePanel represents a panel with a base text label at the top and additional
content that can be shown or hidden. Additional content is shown or hidden
using the simpleTogglePanel control located to the right of the base text label by default.
This is an example of the component with default look-n-feel:

Simple Toggle Panel example

«

»

Add AJAX capability to existing JSF applications

The framework is implemented by using a component library. The library
set Ajax functionality into existing pages, so there is no need to write
any JavaScript code or to replace existing components with new Ajax one.
Ajax4jsf enables page-wide Ajax support instead of the traditional
component-wide support and it gives the opportunity to define the event
on the page. An event invokes an Ajax request and areas of the page
which are synchronized with the JSF Component Tree after changing the
data on the server by Ajax request in accordance with events fired on
the client.

HideView Source

<ui:compositionxmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"xmlns:a4j="http://richfaces.org/a4j"xmlns:rich="http://richfaces.org/rich"><rich:simpleTogglePanelswitchType="client"label="Add AJAX capability to existing JSF applications"> The framework is implemented by using a component library. The library set Ajax functionality into existing pages, so there is no need to write any JavaScript code or to replace existing components with new Ajax one. Ajax4jsf enables page-wide Ajax support instead of the traditional component-wide support and it gives the opportunity to define the event on the page. An event invokes an Ajax request and areas of the page which are synchronized with the JSF Component Tree after changing the data on the server by Ajax request in accordance with events fired on the client. </rich:simpleTogglePanel></ui:composition>

<<Hide Source

The switchType attribute allows to select a toggle approach that can be 'client',
'server' or 'ajax'. The 'server' and 'ajax' types require to be surrounded with a form element such as <h:form> or <a4j:form>.

Switch types example

«

»

Server Switch Type

The regular JSF form submission is processed during the changing mode between
showing and hidding the additional content.

«

»

Ajax Switch Type

This type allows to perform the partial view update instead of the
whole page reloading. You also can reRender other components
while the panel content is toggled.

«

»

Client Switch Type

The switching between showing and hiding the toggle panel content
performs on the client side.

HideView Source

<ui:compositionxmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"xmlns:a4j="http://richfaces.org/a4j"xmlns:rich="http://richfaces.org/rich"><h:form><h:panelGridcolumns="3"width="100%"columnClasses="tpanels,tpanels,tpanels"><rich:simpleTogglePanelswitchType="server"label="Server Switch Type"height="90px"> The regular JSF form submission is processed during the changing mode between showing and hidding the additional content.</rich:simpleTogglePanel><rich:simpleTogglePanelswitchType="ajax"label="Ajax Switch Type"height="90px"> This type allows to perform the partial view update instead of the whole page reloading. You also can reRender other components while the panel content is toggled.</rich:simpleTogglePanel><rich:simpleTogglePanelswitchType="client"label="Client Switch Type"height="90px"> The switching between showing and hiding the toggle panel content performs on the client side.</rich:simpleTogglePanel></h:panelGrid></h:form></ui:composition>