Search code examples
jsfjsf-2primefacespanelconditional-rendering

How can I hide a togglable p:panel before the page loads?

I have a JSF page with 2 components, a button and panel. The button calls jQuery toggle to hide and show the panel. I would like that when the page loads, the panel is initially hidden, so that when I press the button for the first time, the panel shows up.

<p:commandButton onclick="PF('panelMatches').toggle()" value="Matches" type="button" />
<p:panel id="button_panel" widgetVar="panelMatches" closable="true" toggleable="true">
    Matches: 0
</p:panel>

With this code the panel is always initially visible.

Solution

  • just use collapsed="true" as an attribute on <p:panel>. Then it will be rendered "closed" from the beginning and the first call to toggle() will open it.

    Refer to the documentation of the primefaces version you are using: http://www.primefaces.org/documentation.html

    Name      | Default | Type    | Description
collapsed | false   | Boolean | Renders a toggleable panel as collapsed.