Can we hide particular portion of Visualpage on click of button using render and reRender?

Hi Anurag,

Yes, you can hide particular portion of visualforce page on click of button using render and reRender. Please check the code below:

<apex:page controller=”aaa”>
<apex:form >
<apex:pageBlock >

<apex:actionFunction name=”RenderSection” action=”{!RenderSec}”/>

<apex:pageBlockSection>
<apex:selectList multiselect=”false” size=”1″ onChange=”RenderSection() ;” value=”{!SelectedVal}”>
<apex:selectOption itemLabel=”–None–” itemValue=””/>
<apex:selectOptions value=”{!myList}”/>
</apex:selectList>
</apex:pageBlockSection>

<apex:pageBlockSection rendered=”{!showAccount}”>
<apex:outputLabel value=”This Section will show account fields”/>
</apex:pageBlockSection>

<apex:pageBlockSection rendered=”{!showContact}”>
<apex:outputLabel value=”This section will show contact fields”/>
</apex:pageBlockSection>

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

Hope this helps.

Hi Anurag,

You can use this as refrence:

<apex:page controller=”FetchContactvsACC_usingButton”>
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection >

<apex:commandButton action=”{!showSection1}” value=’Yes’ styleClass=’btn’ rerender=’details’></apex:commandButton>
<apex:commandButton action=”{!showSection2}” value=’No’ styleClass=’btn’></apex:commandButton>
</apex:pageBlockSection>
<apex:outputPanel id=’details’>
<apex:pageBlockSection id =’newData’ title=’Discount Rates’ rendered='{!hideshow}’>
Enter Proposal range
</apex:pageBlockSection>

</apex:outputPanel>

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

Apex class:

public class FetchContactvsACC_usingButton
{

Boolean testval = false;
public pagereference showSection1() {
setHideshow(true);
return null; }

public pagereference ShowSection2()
{
setHideshow(false);
return null;
}

public Boolean getHideshow()
{
return this.testval;
}
public void setHideshow(boolean s)
{
this.testval = s;
}
}

Hope this will help you.

Thanks.

Hi,

Yes you can for more understanding –

This could be as simple as setting a boolean property in your controller from the action method that the button invokes.  That would allow you to conditionally render the second page block.

If you are looking to just change that part of the page, you’ll need to rerender an outer container, as you can’t rerender something that wasn’t there in the first place.

Hope this helps.