How to hide and show p:panel on commandbutton click

Question

i have the following problem:

I'm new to JSF2 and primefaces.

I have a table in a page that will be populated with information, after the user enters a string and clicks a CommandButton. After clicking the button, I want it to be disabled until processing is over.

To disable the CommandButton I'm doing the following;

<p:commandButton update=":outPanel" widgetVar="btnSend" id="btnsend"
     value="Calcular" actionListener="#{calcBean.getTrfs}" 
     onclick="btnSend.disable()" oncomplete="btnSend.enable()" />  

And then I have a panel where I want to show its contents:

<p:panel id="outPanel" widgetVar="outpanel">
         #{calcBean.result}
</p:panel>

How can I hide this outpanel when the page loads the first time?

How can I hide it when I click the CommandButton, and only show it again if the processing in my bean is successful?

Thanks.

Answer 1

Solved,

i have to put

   closable="true" toggleable="true" 

attributes in p:panel... Thanks

Answer 2

I have checked following panel hide and show using p:commandButton in JSF,

please try following methods in JSF,

<p:panel id="button_panel" widgetVar="testPanel" closable="true" toggleable="true">
<h1>Testing</h1>
</p:panel>

<p:commandButton onclick="PF('testPanel').show()" value="Show Panel" type="button"/>

<p:commandButton onclick="PF('testPanel').hide();" value="Hide Panel" type="button"/>