How to combine JSF togglePanel to trigger visibility of some other div/element/?

Question

I was looking through a number of websites, but i couldn't find out how to use a toggle panel to change the visibility of another element. Please see the example..

<rich:togglePanel switchType="client"
    stateOrder="panelOneOff, panelOneOn">
    <f:facet name="panelOneOff">
        <rich:toggleControl>
            <h:outputText value="Start"/>
        </rich:toggleControl>
    </f:facet>
    <f:facet name="panelOneOn">
        <rich:toggleControl switchToState="panelOneOff">
            <h:outputText value="Close"/>
        </rich:toggleControl>
    </f:facet>
</rich:togglePanel>


<rich:effect  name="hideDiv"  for="toggleAccordingToTheTogglePanel" type="Fade" />
<rich:effect  name="showDiv"  for="toggleAccordingToTheTogglePanel" type="Appear" />

<div id="toggleAccordingToTheTogglePanel">
    please show me on start and hide me on Close
</div>

What listeners will work to call the hideDiv() or showDiv() javascript functions so the DIV-Element at the end will appear or fade out?

update It be run on jboss 5.1 using richfaces 3.3.2

Answer 1

<rich:toggleControl onclick="hideDiv()">