Primefaces Conditionally Expand LayoutUnit - primefaces

Question

I'm using the primefaces layout component and have a center and a right layoutUnit. I would like to have a link/button in the center layout that expands the right layoutUnit as I default the right layout to collapsed state when I first load the page. I'm using a boolean expression on the right layoutUnit and I update it from my link. Everything works except that the right layoutUnit doesn't get ajaxed updated from my link. If I refresh the page the right layoutUnit is expanded.
page:
<h:form prependId="false">
<p:layout fullPage="true">
<p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}">
<h:outputText value="#{mapBean.text}" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:commandLink actionListener="#{mapBean.showDetail}" update="right" value="Expand Right Layout"/>
</p:layoutUnit>
</p:layout>
</h:form>
Bean:
public class MapBean implements Serializable {
private boolean rightCollapsed=true;
public void showDetail(ActionEvent e){
rightCollapsed=false;
}
//getter/setter for rightCollapsed

Answer 1

See the following forum post about using the <p:layout> component with the fullPage=true attribute.
http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=4766
You cannot wrap the layout component in a form like this, each <p:layoutUnit> needs its own nested form. You can still update the components of the other forms by setting the form id and referring to component ids correctly as another answer had suggested. Try something like this:
<p:layout fullPage="true">
<p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}">
<h:form id="rightForm" prependId="false">
<h:outputText id="mapBeanTextOutputText" value="#{mapBean.text}" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="centerForm" prependId="false">
<p:commandLink actionListener="#{mapBean.showDetail}" update="mapBeanTextOutputText" value="Expand Right Layout"/>
</h:form>
</p:layoutUnit>
</p:layout>

Answer 2

The problem is maybe that you have not update the layout. You can give the h:form a id ,and use this id replace the commandbutton's update id name ,like this:
<h:form id="layoutForm" prependId="false">
<p:layout fullPage="true">
<p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}">
<h:outputText value="#{mapBean.text}" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:commandLink actionListener="#{mapBean.showDetail}" update="layoutForm" value="Expand Right Layout"/>
</p:layoutUnit>
</p:layout>
</form>