<?xml version="1.0" encoding="UTF-8"?>
<section>
<sectioninfo>
<keywordset>
<keyword>toggleControl</keyword>
</keywordset>
</sectioninfo>
<section>
<title>Description</title>
    <para>A link type <property>control</property> for switching between 
    <property>togglePanel</property> facets. Target
     Panel is specified with <emphasis ><property>&quot;for&quot;</property></emphasis> 
     attribute. It can be located inside or outside the <property>togglePanel</property>. As the result of switching 
     between facets previous facet is hidden and another one (specified with
     <emphasis ><property>&quot;switchToState&quot;</property></emphasis> or panel 
      <emphasis ><property>&quot;stateOrder&quot;</property></emphasis> attributes) is 
      shown.</para>
    <figure>
        <title>&lt;rich:toggleControl&gt; component</title>
    <mediaobject> 
        <imageobject>
            <imagedata fileref="images/toggleControl.png"/>
        </imageobject>
    </mediaobject>
    </figure>
    </section>
    <section>
    <title>Key Features</title>
    <itemizedlist>
        <listitem>Highly customizable look and feel</listitem>
        <listitem>Can be located anywhere in a page layout</listitem> 
        <listitem>Switching is provided in the three modes
        <itemizedlist>
          <listitem>Server</listitem>
          <listitem>Client</listitem>
          <listitem>Ajax</listitem>
        </itemizedlist>
        </listitem>  
    </itemizedlist>
</section>
</section>