PrimeFaces Panel collapses on update - jsf

Question

I do not know if this is possible using just primefaces and JSF but I have a panel, which is collapsed on View Entry. I can open the Panel which has a checkbox that triggers an update of the Panel.
The problem is that when the panel is updated by Ajax, the Panel is collapsed again. But I want to retain the current open status of the Panel. It should no close on update. Is this possible?
I use PF 3.2 and JSF2.1
<p:fieldset style="width:200px;height:300px;overflow:auto;">
<h:outputLabel value="Available Applications"
style="font-weight: bold;font-size: 14px;" />
<br />
<br />
<h:panelGroup>
<ui:repeat var="category"
value="#{epsEditController.subscriptionCategoryVOs}">
<p:panel header="#{category.applicationCategory.name}"
id="panell" toggleable="true" closable="false" toggleSpeed="500"
collapsed="true"
widgetVar="panel_#{category.applicationCategory.name}">
<h:panelGrid columns="2" border="0">
<h:outputLabel value="Select all"
style="font-weight: bold;float:left;" />
<p:selectBooleanCheckbox value="#{category.allSelected}">
<p:ajax event="change"
listener="#{epsEditController.selectionChanged(category)}"
update="panell" />
</p:selectBooleanCheckbox>
</h:panelGrid>
<ui:repeat var="subcat"
value="#{category.applicationSubcategoryVOs}">
<p:selectBooleanCheckbox value="#{subcat.selected}"
title="#{subcat.applicationSubcategory.name}"
itemLabel="#{subcat.applicationSubcategory.name}" />
</ui:repeat>
</p:panel>
</ui:repeat>
</h:panelGroup>
</p:fieldset>

Answer 1

The reason the panel was collapsed after each update is caused by using a static collapsed="true" on the panel. This can be fixed in one of two ways
Just updating the content of the panel and not the panel
Keeping track of the state of collapsed state of the panel via ajax and use that state as the value of the collapsedattribute
Updating the content
By putting the form within the panel and only updating that form you effectively update the content instead of the panel. This makes sure that only the form is refreshed and the panel state is kept intact.
<p:panel header="#{category.applicationCategory.name}" id="panell"
toggleable="true" closable="false" toggleSpeed="500"
collapsed="true"
widgetVar="panel_#{category.applicationCategory.name}">
<h:form id="epsAppForm">
<h:panelGrid columns="2" border="0">
<h:outputLabel value="Select all"
style="font-weight: bold;float:left;" />
<p:selectBooleanCheckbox value="#{category.allSelected}">
<p:ajax event="change"
listener="#{epsEditController.selectionChanged(category)}"
update="#form" />
</p:selectBooleanCheckbox>
</h:panelGrid>
........
</h:form>
</p:panel>
Using EL instead of a fixed value
You can put EL in the collapsed attribute instead of the fixed collapsed="true". Something like
collapsed="#{myBean.toggleStates[category.applicationCategory]}"
You can then keep track of the state of the pannel via ajax calls
<p:ajax event="toggle" listener="#{myBean.toggleState(category.applicationCategory)" />
...'myBean' code:
Map<ApplicationCategory, boolean> toggleStates = new HashMap<>();
... prepopulate toggleStates on #init or something
public void toggleState(ApplicationCategory myCategory) {
toggleStates.put(myCategory, !(toggleStates.get(myCategory));
}