[SalesForce] Hide and show output panel in Visualforce page

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;


    }

}   

Best Answer

This works for me:

Controller:

public class MyController1{

public Boolean render1{get;set;}
public Boolean render2{get;set;}

public MyController1(ApexPages.StandardController controller) {
    render1 = true;
    render2 = false;
}

public MyController1(){
    render1 = true;
    render2 = false;
}


public void hide1Show2(){
    render1=false;
    render2=true;

}

public void hide2Show1(){
    render1=true;
    render2=false;
}

}

Page:

<apex:page controller="MyController1">
  <apex:form >
    <apex:pageBlock>
      <apex:pageBlockSection id="search">

        <apex:outputPanel id="thePanelWrapper1">
          <apex:outputPanel id="panel1" rendered="{!render1}" layout="block">
            <apex:commandLink action="{!hide1Show2}" value="show second"  reRender="thePanelWrapper1,thePanelWrapper2" />
          </apex:outputPanel>
        </apex:outputPanel>

        <apex:outputPanel id="thePanelWrapper2">
          <apex:outputPanel id="panel2" rendered="{!render2}" layout="block">
            <apex:commandLink action="{!hide2Show1}" value="show first"  reRender="thePanelWrapper1,thePanelWrapper2" />
          </apex:outputPanel>
        </apex:outputPanel>


    </apex:pageBlockSection>
  </apex:pageBlock>
</apex:form>

Related Topic