I have been trying to render a part of a page, on the basis of a condition. I am using HTML and Javascript in my VF Page, I want to know whether it is possible to use javascript in the render attribute of the apex:outputPanel, like :

<apex:outputPanel rendered="{!if(document.getElementById(checkBoxExistingAccId).checked,true,false)}">

If not, what can be the workaround, since initially the render is dependent on a get-set variable, and laterwards we are letting users to change it, but the value will be saved only on the click of the button. By the time the button is not clicked, I want the portion to hide/display on the basis of value.

  • You don't need JavaScript for this, simply have properties in controller deciding the rendering of sections.
    – Raul
    Aug 2, 2017 at 10:08
  • 1
    Remember that apex: tags are processed on the server and turned into HTML that is passed to the client (the browser). It is only in the browser that the JavaScript runs and it is working on the generated HTML.
    – Keith C
    Aug 2, 2017 at 18:22

1 Answer 1


if you want to use rerender you will need a property in your apex controller e.g.

Boolean renderPanel {get; set;}

Your output panel would be rendered based on this property e.g.

<apex:outputPanel id="myPanel" rendered="{!renderPanel}"...

Your user's button click should call a controller method to set/unset the property, and then rerender the outputPanel e.g.

<apex:commandButton action="{!showHidePanel}" value="Click Me!" id="theButton" rerender="myPanel"/>

You could in fact have a rerender action on more than just a button click, but you mentioned it is a button, so the above pseudo code should get you moving.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .