I have the following code in my page.
<h:form>
<rich:togglePanel switchType="ajax" stateOrder="s,b" id="id1">
<f:facet name="s">
<h:panelGrid columns="2">
<h:outputText value="First" />
<rich:toggleControl value="edit" for="id1"/>
</h:panelGrid>
</f:facet>
<f:facet name="b">
<h:panelGrid columns="2">
<h:outputText value="Second" />
<rich:toggleControl value="update2" for="id1"/>
</h:panelGrid>
</f:facet>
</rich:togglePanel>
<rich:togglePanel switchType="ajax" stateOrder="s,b" id="id2">
<f:facet name="s">
<h:panelGrid columns="2">
<h:outputText value="First" />
<rich:toggleControl value="edit2" for="id2"/>
</h:panelGrid>
</f:facet>
<f:facet name="b">
<h:panelGrid columns="2">
<h:outputText value="Second" />
<rich:toggleControl value="update2" for="id2"/>
</h:panelGrid>
</f:facet>
</rich:togglePanel>
</h:form>
Only 1 of the two panels is working (which ever is used first). Is there a restriction on using more than 1 panel in a page?
FOUND IT!
Give id to each rich:toggleControl.