A Simple Way to Hide and Show HTML Elements Using VisualForce

It’s not 2002 anymore. There is really no excuse for having an ugly web application; even if it is a “business application”. One way to tidy up your UI and improve your UX is to dynamically hide and show elements on your Visualforce pages based on how your users interact with your page.

advertisement

The Problem

So you are programing a VisualForce page and you find yourself needing to hide or show an HTML element on the page. No problem. Here are three simple ways to hide or show one or multiple HTML element just by setting a property on the Controller.

Solution

Option 1 – Postback

A real easy way to hide or show an HTML element is to evaluate a Boolean property on the Controller. A lot of folks may not realize it, but you can insert the same formulas you use in Validation Rules, Workflow Rules and so on inside of any merge field on the page.

In this example, I:

  1. created a new VisualForce page and created a custom controller for it.
  2. Then I created a Boolean property called “showContent”.
  3. I added the div that will be hidden and shown.
  4. Then I added a style tag to set the CSS Display property.
  5. I used a merge field to inject an “IF” formula which will be evaluated at runtime and render either “block” or “none” depending on the evaluation of the “showContent” Boolean. More CSS Display Options
  6. Lastly, I added a button that will toggle the Boolean back and forth.

VisualForce Page

Controller

Option 2 – Using Ajax

So all we need to do to make this happen asynchronously is to wrap the part of the page that will change in anand add a reRender attribute to the button. The value of the reRender attribute will be the id of the outputPanel. This will allow for a partial page update where the contents within the output panel will be re-drawn without a visible page refresh.

Visualforce Page

Option 3 – Hide/Show Multiple Elements based on their class

Now lets get a little tricky. You can easily hide and show multiple elements by giving them all the same class and adding a CSS style block to the page. Then we can move the formula merge field up into the style declaration for a new class in the style block. The only trick here is to make sure your style block is inside the outputPanel, otherwise it will not be updated when the Ajax call fires.

Visualforce Page

That’s it! If you have any questions or just want to let me know that this post helped you out, please leave a comment. 🙂

advertisement

Leave a Reply

Legacy Comments - Closed

  1. nav says:

    Thanks Cody for this post.

    I tried using the method you suggested on a VisualForce tag namely . I found that I had to convert the double quotes around block and none to single quotes before it would compile. Escaping the double quotes did not seem to work.

    This is just a minor issue but I thought should let you know.

    Thanks.
    nav

  2. Because changing a picklist value is a client-die opperation, you will need to use an actionSupport tag to make your controller aware of the change. Basically, it allows you to make an Ajax request to call a method on your controller and then redraw part of the page.. Try something like this:

    VF Page:
    <!–my picklist–>
    <apex:selectList id="mySelectList" size="1" multiselect="false" value="{!selectedPickVal}">
    <apex:selectOptions value="{!pickVals}" />
    <apex:actionSupport event="onchange" action="{!doMySelectListChanged}" rerender="contentPanel"/>
    </apex:selectList>
    <!–the panel which will need to be redrawn–>
    <apex:outputpanel id="contentPanel">

    <!–If you are using a VF component like a page block…–>
    <apex:PageBlock rendered = "{!showSection}">

    </apex:PageBlock>

    <!–if you are using an HTML element…–>
    <div style="display:{!if(showSection,"block","none")};">

    </div>
    </apex:commandbutton>

    Apex:
    public Boolean showSection { get; set; }
    public String selectedPickVal { get; set; }
    public List pickVals {get; set; }

    //Constructor – don't forget to update it with your class name
    public MyClassName() {
    //Set the showSection variable to false on page load
    showSection = false;

    }

    //Method called when the picklist value is changed
    public PageReference doMySelectListChanged() {
    if(selectedPickVal == 'some string'){
    showSection = true;
    }
    else{
    showSection = false;
    }
    return null;
    }

  3. Abhishek says:

    Hi Cody, can you please help with this requirement. I have a picklist field in Opptunity object called 'Template" = Connect. So, whenever a user selects this picklist, a section called ="Proposal for Connect" will be visible other it will be hidden. How I can achieve it? Please help. I am new to VFP.

  4. Trent Poche says:

    Great write up Cody! I stumbled across your page while doing a google search for this very issue and your blog has been very helpful. Thanks 🙂

  5. Adriana says:

    thanks for share!

  6. Liza Stribling says:

    Cool. Thank for posting this, it really helped me out.

Please use the Google+ Comment section above. Thanks!