+ Start a Discussion
Narayan HNarayan H 

How to Dynamically render of page section based on checkbox

I want to render a Company Info section of the VF page based on checking a firld "I don't have an Account". Here is my VF page. Appreciate your help

<apex:page standardController="RMA__c" >
    <apex:form >
        
         <apex:pageBlock >
           <apex:outputLink value="/{!RMA__c.Id}" >Go Back to Case: {!RMA__c.Case_Number__c}</apex:outputLink>     
         </apex:pageBlock>
           
         <apex:pageBlock title="Create RMA">
             
            <apex:pageBlockButtons location="top">
                <apex:commandButton value="Save" action="{!save}"/>
                <apex:commandButton value="Cancel" action="{!cancel}"/>
            </apex:pageBlockButtons>      
             
            <apex:pageBlockSection title="Caller Details" columns="1" collapsible="false">
                <apex:inputField required="true" value="{!RMA__c.First_Name__c}" label="First Name"/>
                <apex:inputField required="true" value="{!RMA__c.Last_Name__c}" label="Last Name"/>
                <apex:inputField required="true" value="{!RMA__c.Phone__c}" label="Phone #"/>
                <apex:inputField required="true" value="{!RMA__c.Email_Address__c}" label="Email Address"/>
                <apex:inputField value="{!RMA__c.Case__c}" label="Case Number"/>
                <apex:inputField value="{!RMA__c.PO_Number__c}" label="PO Number"/>
                <apex:inputField value="{!RMA__c.Account_Number__c}" label="Account Number"/> 
                
                <apex:inputCheckbox value="{!RMA__c.I_don_t_have_an_Account__c}" label="Don't have account">
                 <apex:actionSupport event="onchange" reRender="companyInfo"/>
                </apex:inputCheckbox>                      
           </apex:pageBlockSection>  
             
        
           <apex:pageBlockSection title="Company Details" columns="1" collapsible="true" id="companyInfo"> 
                <apex:inputField value="{!RMA__c.Company_Name__c}" label="Company Name"/>
                <apex:inputField value="{!RMA__c.Street_Address__c}" label="Street Address"/>
                <apex:inputField value="{!RMA__c.City__c}" label="City"/>
                <apex:inputField value="{!RMA__c.State__c}" label="State"/>
               <apex:inputField value="{!RMA__c.Zip_Postal_Code__c}" label="Zip/Postal Code"/>                
          </apex:pageBlockSection>     
                                      
            <apex:detail relatedList="false"/>
        </apex:pageBlock> 
        
    </apex:form>
</apex:page>
 
Alain CabonAlain Cabon
Hi,

The easy way is to use this trick with javascript.

1)  Add : onclick for the checkbox given that this checkbox is always unchecked by default.

<apex:inputCheckbox value="{!RMA__c.I_don_t_have_an_Account__c}" label="Don't have account"  onclick="myFunction()" 
</apex:inputCheckbox>      

2) Put the block section in a hidden div by default:

  <div id="myDIV" style="display:none">       
          <apex:pageBlockSection title="Company Details" columns="1" collapsible="true"> 
                <apex:inputField value="{!RMA__c.Company_Name__c}" label="Company Name"/>
                ...          
          </apex:pageBlockSection>  
  </div>

3) Use a little javascript code to toggle the value of the display attribute.

   <script>   
       function myFunction() {
        var x = document.getElementById('myDIV');
        if (x.style.display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }
    }
    </script>
    <apex:form >  

Best regards
Alain