Can anyone tell me how to hide and show the output panel in visualforce page
My usecase is:
I have 2 output panel. In the first I have a commandlink when I click on the link the 1st outputpanel should get hide and 2nd one get display and same for output panel 2
I have tried following code but it doesnt give the expected
VFP
<apex:page controller="MyController1">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection id="search">
<apex:outputPanel id="thePanelWrapper1">
<apex:outputPanel id="panel1" rendered="{!rend1}" layout="block">
First Panel
<apex:commandLink action="{!commandLinkAction}" value="show second" reRender="thePanelWrapper2" />
</apex:outputPanel>
</apex:outputPanel>
Second Panel
<apex:commandLink action="{!commandLinkAction1}" value="show first" reRender="thePanelWrapper1" />
</apex:outputPanel>
</apex:outputPanel>
Controller:
public class MyController1{
public MyController1(ApexPages.StandardController controller) {
rend = false;
}
public MyController1(){
rend = false;
}
public Boolean rend{get;set;}
public Boolean rend1{get;set;}
public void commandLinkAction(){
rend=true;
rend1=false;
// return null;
}
public void commandLinkAction1(){
rend1=true;
rend=false;
}
}
I don't know what's wrong in my code.
Updated Code
<apex:page controller="MyController1">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection id="search">
<apex:outputPanel id="thePanelWrapper1">
<apex:outputPanel id="panel1" rendered="{!rend1}" layout="block">
<apex:commandLink action="{!commandLinkAction}" value="show second" reRender="thePanelWrapper2" />
</apex:outputPanel>
</apex:outputPanel>
<apex:outputPanel id="thePanelWrapper2">
<apex:outputPanel id="panel2" rendered="{!!rend1}" layout="block">
<apex:commandLink action="{!commandLinkAction1}" value="show first" reRender="thePanelWrapper1" />
</apex:outputPanel>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Controller:
public class MyController1{
public MyController1(){
rend1 = true;
}
public Boolean rend1{get;set;}
public void commandLinkAction(){
rend1=false;
// return null;
}
public void commandLinkAction1(){
rend1=true;
}
}
id="panel1"
for one panel is a mistake ? You try to rerender with this id instead :reRender="thePanelWrapper2"
.