2

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;


    }

}   
4
  • Id id="panel1" for one panel is a mistake ? You try to rerender with this id instead : reRender="thePanelWrapper2".
    – SF_user
    Dec 1, 2014 at 8:36
  • @SF_user : it doesnt work Dec 1, 2014 at 9:01
  • @SF_user: can you give me sample code for this Dec 1, 2014 at 9:01
  • Using Javascript for doing that can be a solution ?
    – SF_user
    Dec 1, 2014 at 9:20

4 Answers 4

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>

1
  • [~user3332076] did you try the above? Aug 1, 2017 at 13:30
0

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.

enter image description here

enter image description here

6
  • My use case is I have 2 output panel and each panel has one button which is used to show another panel Dec 1, 2014 at 10:05
  • If I click the button in first panel then it will show the content of second panel and hide the content of first panel and same for second panel button Dec 1, 2014 at 10:06
  • But in this code the content of panel is not hiding after clicking the buttton Dec 1, 2014 at 10:07
  • It does for me. Try this code as a new page. Note the changes for rerender attribute. Maybe you didn't change that in your code.
    – AslamK
    Dec 1, 2014 at 10:20
  • it doesnt work man Dec 1, 2014 at 10:28
0

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>
7
  • it gives both output panel by default Dec 1, 2014 at 9:51
  • Initially it will show panel1 Dec 1, 2014 at 9:52
  • after clicking first panel link then it will show second panel content and hide the first panel content Dec 1, 2014 at 9:52
  • I edited my answer to initially hide the second panel. Otherwise it works ?
    – SF_user
    Dec 1, 2014 at 10:07
  • It doesnt work man.. Can you give me the working code Dec 1, 2014 at 10:37
0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .