How to hide RichFaces component on load?

Question

I would like to hide selected rendered component (for example: label) on page load. This gives mi opportunity to subsequently show component after user action (for example: when user clicks link).

Here is example:

<a4j:outputPanel id="myPanel">
    <h:outputText value="Text 1" />
    <h:outputText value="Text 2" />
</a4j:outputPanel>
<a4j:commandLink ajaxSingle="true" onclick="#{rich:component('myPanel')}.show()">
    <h:outputText value="Show panel"/>
</a4j:commandLink>

Panel myPanel should be hidden at the begining (after page load) and should apper when user clicks link.

Can you give me please advice how to do that?

Thanks, Rafal

Answer 1

Here is solution from RichFaces forum which works fine.

CSS:

.hideOnLoad {
    display: none;
}

Page fragment:

<a4j:outputPanel id="myMessage" styleClass="hideOnLoad">
    <h:outputText value="This is my first message" />
    <h:outputText value="This is my second message" />
</a4j:outputPanel>
<br/>
<a4j:commandLink ajaxSingle="true"
    onclick="$('myMessage').removeClassName('hideOnLoad');"
    value="Show my message" />