Set up hotkey for collapse a panel

Question

Our project use JSF 2.2 primeface 5.1.

I have a toggleable panel, the collapse attribute set to true.

<p:panel id="panel1" toggleable="true" collapsed="true">
...
</p:panel> 

How can I set a p:hotkey in the jsf page to change the attribute collapsed to false ?

Answer 1

At a basic level, you can expand the pane with:

<p:hotkey bind="ctrl+s" handler="thePanelWidgetVar.expand();" />

If what you really want is to toggle the state of the panel, you could just call the collapse() and expand() on the panel directly. Obviously, you need to check the current state of the panel to determine what to call. You can collapse it all into the following script:

 <script>
      function togglePanelState (thePanel){

        if(thePanel.cfg.collapsed){
             thePanel.expand();
         }else{
             thePanel.collapse();
         }
      }
 </script>

You could then use togglePanelState thus

 <p:hotkey bind="ctrl+s" handler="togglePanelState(thePanelWidgetVar);" />

EDIT:

Thanks to Hatem Alimam for pointing out that a convenience method similar to my implementation of togglePanelState exists out of the box in PF 5.1, in the form of a toggle() function. Using that, you could then have instead:

 <p:hotkey bind="ctrl+s" handler="PF('thePanelWidgetVar').toggle();" />