How can I expose part of a page in response to a button click

Question

I want a simple way in Visualforce to expose part of the page in response to a button click. This should be easy, but it is giving me more trouble than anything I've done with VF to date.

After reading How can an apex:pageBlockSection be rerendered I wrapped the re-render section in a div tag, but that didn't help at all.

Here is a much-simplified version of the page:

<apex:page controller="ProvisioningController">

    <apex:form >
        <apex:commandButton action="{!showActivationForm}" value="Activate" rerender="activationForm"/> 
    </apex:form>

    <div id="activationForm">
        <apex:form rendered="{!activationFormIsVisible}">
            <p>Show some more fields here...</p>
            <apex:commandButton action="{!updateDb}" value="Whatever, Man"/>
        </apex:form>
    </div>

</apex:page>

And the relevant controller code:

public with sharing class ProvisioningController {

    public Boolean activationFormIsVisible { get; private set; }

    public ProvisioningController() {
        activationFormIsVisible = false;
    }

    public PageReference showActivationForm() {
        this.activationFormIsVisible = true;
        return ApexPages.currentPage();
    }
}

It seems like I shouldn't even need to use my controller for this kind of task.

Answer 1

Your code isn't working because you can only rerender Visualforce components -- the Visualforce framework can't tell that you have a plain HTML <div>. This should work:

<apex:outputPanel id="activationForm">
    <apex:form rendered="{!activationFormIsVisible}">
        <p>Show some more fields here...</p>
        <apex:commandButton action="{!updateDb}" value="Whatever, Man"/>
    </apex:form>
</apex:outputPanel>

Having said that, I think you're right, and this is total overkill. It's one of the places where plain Javascript/jQuery shines:

<button class="btn" onclick="jQuery('#activationForm').slideDown()">
    Activate
</button>

<div id="activationForm" style="display:none">
    <apex:form rendered="{!activationFormIsVisible}">
        <p>Show some more fields here...</p>
        <apex:commandButton action="{!updateDb}" value="Whatever, Man"/>
    </apex:form>
</div>

Here, the btn style on the <button> lets you mimic SFDC's standard button styling (if you want), and the style attribute on the div keeps it hidden when the page is first loaded.