In the below xhtml snipett, I need to display only the a4j:commandButton (Apply) when the page initially renders. When the user clicks the apply button, the rich:panel and two rich:progressBar components need to be displayed.

With the code as is below, the rich:panel displays as well as the Apply button on initial load of the page. How can I hide (using rendered attribute?) the entire rich:panel and contents when the page first loads and then show it and everything inside when the user clicks the Apply button? I tried using rendered on rich:panel but that does not work (the progressBars don't display when I click the Apply button). thx.

<a4j:outputPanel>

 <rich:panel id="progressPanel">
 <a4j:outputPanel id="progressPanel1">
 <rich:spacer width="70"/>
 <h:outputText value="Updating ERS" rendered="#{!progressBarWebService.buttonRendered}"/>
 <rich:progressBar value="#{progressBarLocalDB.currentValue}"
 interval="1000"
 label="#{progressBarLocalDB.label}"
 enabled="#{progressBarLocalDB.enabled}"
 completeClass="color: yellow;"
 finishClass="color: red;"
 minValue="-1"
 maxValue="100">
 <f:facet name="initial"></f:facet>
 <f:facet name="complete">
 <br />
 <h:outputText value="Process Done" />
 </f:facet>
 </rich:progressBar>
 </a4j:outputPanel>

 <a4j:outputPanel id="progressPanel2">
 <rich:spacer width="60"/>
 <h:outputText value="Adding ICOMS Note" rendered="#{!progressBarWebService.buttonRendered}"/>
 <rich:progressBar value="#{progressBarWebService.currentValue}"
 interval="1000"
 label="#{progressBarWebService.label}"
 enabled="#{progressBarWebService.enabled}"
 minValue="-1"
 maxValue="100">
 <f:facet name="initial"></f:facet>
 <f:facet name="complete">
 <br />
 <h:outputText value="Process Done" />
 </f:facet>
 </rich:progressBar>
 </a4j:outputPanel>
 </rich:panel>

 <rich:spacer height="100"/>
 <rich:spacer width="80"/>

 <a4j:commandButton action="#{equipmentProcessingView.apply}"
 value="Apply"
 reRender="progressPanel, newStatusDecorator"/>
 </a4j:outputPanel>