Hide and Show HTML Elements Using VisualForce and Controller

Arun Garg   5/13/2017   Comment  

1. I am displaying two 'div' section according to Boolean condition by click on button.
2. Putting condition in 'style' to display the tags.
3. I  condition, if  'showData'  is true then div section will visible , If  'showData' is false then div tag will be hide.

Click For Demo

Visualforce Page:

<apex:page controller="ShowHideControler" sidebar="false">

    <apex:form >

        <h1>Show/Hide HTML form Visualforce Example</h1>

        

        <div id="contentToToggle" style="display:{!if(showData,"block","none")};">

            This is the content that will not be display.

        </div>

        

        <div>

            This content will be display.

        </div>

        

        <apex:commandbutton value="Toggle Content" action="{!showHideContent}"></apex:commandbutton>

    </apex:form>

</apex:page>

Apex Class:

public class ShowHideControler{

    //Public Propertie

    public Boolean showData { get; set; }

    //Constructor

    public ShowHideControler() {

        //Set the showContent variable to true on page load

        showData = true;

    }

    //Method called when the Toggle Content button is clicked

    public PageReference showHideContent() {

        //If the showContent variable is true, set it to false, else, set it to true

        if(showData){

            showData = false;

        }

        else{

            showData = true;

        }

        return null;

    }

}

2. Hide and Show HTML Elements with refresh the page:

Visualforce Page:

<apex:page controller="ShowHideControler" sidebar="false">

    <apex:form >

         <apex:outputpanel id="contentPanel">

            <h1>Show/Hide HTML form Visualforce Example with refresh the page</h1>

                

                <div id="contentToToggle" style="display:{!if(showData,"block","none")};">

                    This is the content that will be toggled.

                </div>

                

                <div>

                    This content will not be toggled.

                </div>

                

        </apex:outputpanel>

        <apex:commandbutton value="Toggle Content Without Refresh" action="{!showHideContent}" rerender="contentPanel"></apex:commandbutton>

    </apex:form>

</apex:page>

Visualforce Page:

<apex:page controller="ShowHideControler" sidebar="false">

    <apex:form >

         

<apex:outputpanel id="contentPanel1">

     

                <style type="text/css">

                    .toggleContent {display:{!if(showData,"block","none")};}

                </style>

                <h1>Show/Hide HTML form Visualforce Example</h1>

     

                <div class="toggleContent">

                    This is the content that will be toggled.

                </div>

     

                <div>

                    This content will not be toggled.

                </div>

             </apex:outputpanel>

            <apex:commandbutton value="Toggle Content By Class Name" action="        {!showHideContent}" rerender="contentPanel1"></apex:commandbutton>

    </apex:form>

</apex:page>