One Pageblocksection to another rendered using ActionFunction in Visualforce page in Salesforce

What is Action Function?

apex:actionFunction component provides support for invoking controller action methods directly from JavaScript code using an AJAX request.

It is different from actionsupport which only provides support for invoking controller action methods from other Visualforce components.

In controller method we are checking if Rating is high then we are setting boolean variable as true.

So phone textbox and Industry picklist value will be rendered automatically without refreshing full page.

Apex Controller

public class actionfunction {
    public Account acc{get;set;}
    public Boolean showPhone{get;set;}    
    
    public actionfunction(){
        acc = new Account();
        showPhone = false;
    }
    
    public PageReference priorityChanged(){
        if(acc.Rating == 'Hot'){
            showPhone = true;
        }
        else{
            showPhone = false;
        }
        return null;
    }    
}

Vf Page

<apex:page controller="actionfunction" tabStyle="Account">
    <apex:form >
        <apex:actionFunction name="priorityChangedJavaScript" action="{!priorityChanged}" rerender="out"/>        
        <apex:pageBlock title="Action Function Usecase">
            <apex:pageBlockSection title="If you will select High Rating Priority then phone textbox will be shown" columns="1"  collapsible="false">
                <apex:inputField value="{!acc.Rating}" onchange="priorityChangedJavaScript()" />              
            </apex:pageBlockSection> 
            <apex:pageBlockSection title="test" id="out" >
                <apex:inputField value="{!acc.Phone}" rendered="{!showPhone}"/>
                <apex:inputField value="{!acc.Industry}" rendered="{!showPhone}" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output