### 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.16. < rich:toggleControl > available since 3.0.0

expand all

#### 6.10.16.1. Description

A link type control for switching between togglePanel facets. Target Panel is specified with "for" attribute. It can be located inside or outside the togglePanel. As the result of switching between facets previous facet is hidden and another one (specified with "switchToState" or panel "stateOrder" attributes) is shown.

Figure 6.107. <rich:toggleControl> component

#### 6.10.16.2. Key Features

- Highly customizable look and feel

- Can be located anywhere in a page layout

- Switching is provided in the three modes

  - `Server`

  - `Client`

  - `Ajax`

#### 6.10.16.3. Details of Usage

As it was mentioned above, the control could be in any place in layout and linked to a switching panel that is managed with "for" attribute (in the "for" attribute the full component "id" is specified according to naming containers).

The togglePanel could be also switched from the side of the control instead of being strictly defined in "switchOrder" attribute of <rich:togglePanel>.

Example:

    ...

    <rich:togglePanel id="panel" initialState="empty" switchType="client">

            <f:facet name="first">

                    <h:panelGroup>

                        <rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/>

                            <rich:toggleControl for="helloForm:panel" value=" Second" switchToState="second"/>

                            <!--Some content-->

                    </h:panelGroup>

            </f:facet>

            <f:facet name="second">

                    <h:panelGroup>

                            <rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/>

                            <rich:toggleControl for="helloForm:panel" value=" first" switchToState="first"/>

                            <!--Some content-->

                    </h:panelGroup>

            </f:facet>

            <f:facet name="empty">

                    <h:panelGroup>

                        <rich:toggleControl for="helloForm:panel" value="first" switchToState="first"/>

                            <rich:toggleControl for="helloForm:panel" value=" second" switchToState="second"/>

                    </h:panelGroup>

            </f:facet>

    </rich:togglePanel>

    ...

In this example the switching is performed on facets specified in the "switchToState" attribute.

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

#### 6.10.16.4. Reference Data

Table of <rich:toggleControl> attributes.

Table 6.152. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.ToggleControl
component-class | org.richfaces.component.html.HtmlToggleControl
component-family | org.richfaces.ToggleControl
renderer-type | org.richfaces.ToggleControlRenderer
tag-class | org.richfaces.taglib.ToggleControlTag

Table 6.153. Classes names that define a component appearance

Class name | Description
--- | ---
rich-tglctrl | Defines styles for a toggle control

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

- Prev6.10.15. < rich:togglePanel > ...
- Top of page
- Front page
- Next6.10.17. < rich:toolBar > ...