Hide and show output panel in Visualforce page

Question

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;


    }

}   

Answer 1

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>

Answer 2

Updated your VF code a bit. See if this works for you. Note the changes in the rerender attributes and value in the rendered attribute

VF Page

<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,thePanelWrapper1" />
    </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,thePanelWrapper2" />
    </apex:outputPanel>
</apex:outputPanel>


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

</apex:page>

Controller ( same as the one you posted in the question )

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;

    }

}

Screenshot of working example.

Answer 3

Try this :

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

     <apex:outputPanel id="thePanelWrapper1">
        <apex:commandLink action="{!commandLinkAction}" value="show second"  onclick="showPanel('second')" />
     </apex:outputPanel>

    <apex:outputPanel id="thePanelWrapper2" layout="block" style="display: none">
        <apex:commandLink action="{!commandLinkAction}" value="show first"  onclick="showPanel('first')" />
    </apex:outputPanel>

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


    <script type="text/javascript">
        function showPanel(panel) {
            if(panel == 'first') {
                document.getElementById('{!$Component.search.thePanelWrapper1}').style.display = 'block';
                document.getElementById('{!$Component.search.thePanelWrapper2}').style.display = 'none';
            } else {
                document.getElementById('{!$Component.search.thePanelWrapper1}').style.display = 'none';
                document.getElementById('{!$Component.search.thePanelWrapper2}').style.display = 'block';
            }
        }
    </script>

</apex:page>

Answer 4

Try this code for your Controller.

public class MyController1{

    public Boolean panel1 {get; private set;}
    public Boolean panel2 {get; private set;}

    public MyController(ApexPages.StandardController controller) {
        panel1 = true;
        panel2 = false;
    }

    public void displayPanel1(){
        panel1 = true;
        panel2 = false;
    }

    public void displayPanel2(){
        panel1 = false;
        panel2 = true;
    }
}

And this for your VF Page

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

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

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

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

The commandLinks must rerender both panels, the outerpanels are the ones that need rerendered, but the render tag should be in the inner panels.