### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.10.11. < rich:simpleTogglePanel > available since 3.0.0

expand all

#### 6.10.11.1. Description

A collapsible panel, which content shows/hides after activating a header control.

Figure 6.99. <rich:simpleTogglePanel> component

#### 6.10.11.2. Key Features

- Highly customizable look and feel

- Support for any content inside

- Collapsing expanding content

- Three modes of collapsing/expanding

  - `Server`

  - `Client`

  - `Ajax`

#### 6.10.11.3. Details of Usage

The component is a simplified version of toggle panel that initially has a defined layout as a panel with a header playing a role of a mode switching control. On a component header element, it's possible to define a label using an attribute with the same name.

Switching mode could be defined with the "switchType" attribute with three possible parameters.

- `Server` (DEFAULT)

  The common submission is performed around simpleTogglePanel and a page is completely rendered on a called panel. Only one at a time panel is uploaded onto the client side.

- `Ajax`

  AJAX form submission is performed around the panel, content of the called panel is uploaded on Ajax request and additionally specified elements in the "reRender" attribute are rendered. Only one at a time panel is uploaded on the client side.

- `Client`

  All panels are uploaded on the client side. Switching from the active to the hidden panel is performed with client JavaScript.

The <rich:simpleTogglePanel> component also has an "opened" attribute responsible for keeping a panel state. It gives an opportunity to manage state of the component from a model. If the value of this attribute is"true" the component is expanded.

- "onmouseover "

- "onclick "

- "onmouseout "

- etc.

Figure 6.100. <rich:simpleTogglePanel> states

With help of "openMarker" and "closeMarker" facets you can set toggle icon for simpleTogglePanel .

Information about the "process" attribute usage you can find " Decide what to process " guide section.

#### 6.10.11.4. Reference Data

Table of <rich:simpleTogglePanel> attributes.

Table 6.140. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.SimpleTogglePanel
component-class | org.richfaces.component.html.HtmlSimpleTogglePanel
component-family | org.richfaces.SimpleTogglePanel
renderer-type | org.richfaces.SimpleTogglePanelRenderer
tag-class | org.richfaces.taglib.SimpleTogglePanelTag

Table 6.141. Facets

Facet name | Description
--- | ---
openMarker | Redefines the icon for expanding the panel
closeMarker | Redefines the icon for collapsing the panel

Table 6.142. Classes names that define a component appearance

Class name | Class description
--- | ---
rich-stglpanel | Defines styles for a wrapper <div> element of a component
rich-stglpanel-header | Defines styles for header element of a component
rich-stglpnl-marker | Defines styles for a wrapper <div> element of a marker
rich-stglpanel-body | Defines styles for a component content

Table 6.143. Style component classes

Class name | Class description
--- | ---
styleClass | The class defines panel common style. It's used in the outside <div> element
bodyClass | applicable to panels body elements
headerClass | applicable to header elements

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

#### 6.10.11.5. Relevant Resources Links

On the component LiveDemo page you can see the example of <rich:simpleTogglePanel> usage and sources for the given example.

- Prev6.10.10. < rich:separator > ...
- Top of page
- Front page
- Next6.10.12. < rich:spacer > ...