How can I display 1 of 4 panels when a panel is clicked?

Question

I'm trying to display 1 of 4 sections based on a clicks on navigation panels.

I know that this could easily be done with a bit of JavaScript but I'd prefer to use the standard Visualforce mechanisms as this will allow me to only load the section that the user clicks as oppose to loading all sections at the beginning yet leaving them hidden.

So the idea is pretty simple. The user clicks one of the DIVs and then it displays the related section in container (whilst hiding the other 3 sections). For some reason it doesn't work and I've been unable to determine why.

Visualforce Page:

<apex:page showHeader="true" sidebar="false" title="White Tab" controller="WhiteTabController">
<style type="text/css">
.sectionbox {
    float:left;width:130px;height:20px;background-color: rgb(32,123,60);color: #ffffff;border:1px solid #ffffff;padding:10px;text-align:center;
}
</style>
    <div style="margin: 0 auto; width:608px; height:42px;">
        <apex:actionRegion>
            <apex:outputPanel styleClass="sectionbox" layout="block">RAG
            <apex:actionSupport event="onclick" action="{!setRAG}" rerender="container"/>
            </apex:outputPanel>
        </apex:actionRegion>
        <apex:actionRegion>
            <apex:outputPanel styleClass="sectionbox" layout="block">Hot Candidates
            <apex:actionSupport event="onclick" action="{!setHotCandidates}" rerender="container"/>
            </apex:outputPanel>
        </apex:actionRegion>
        <apex:actionRegion>
            <apex:outputPanel styleClass="sectionbox" layout="block">CV Sell Out
            <apex:actionSupport event="onclick" action="{!setCVSellOut}" rerender="container"/>
            </apex:outputPanel>
        </apex:actionRegion>
        <apex:actionRegion>
            <apex:outputPanel styleClass="sectionbox" layout="block">AMS Triggers
            <apex:actionSupport event="onclick" action="{!setTriggers}" rerender="container"/>
            </apex:outputPanel>
        </apex:actionRegion>
        <!--<div class="sectionbox">RAG</div>
        <div class="sectionbox">Hot Candidates</div>
        <div class="sectionbox">CV Sell Out</div>
        <div class="sectionbox">AMS Triggers</div>-->
    </div>

    <apex:actionRegion>
    <apex:outputPanel id="container">

        <apex:outputPanel rendered="{!showRAG}">
        RAG
        </apex:outputPanel>

        <apex:outputPanel rendered="{!showHotCandidates}">
        Hot Candidates
        </apex:outputPanel>

        <apex:outputPanel rendered="{!showCVSellOut}">
        CV Sell Out
        </apex:outputPanel>

        <apex:outputPanel rendered="{!showTriggers}">
        AMS Triggers
        </apex:outputPanel>
    </apex:outputPanel>
    </apex:actionRegion>
</apex:page>

Visualforce Controller:

public with sharing class WhiteTabController {

    public Boolean showRAG {get;set;}
    public Boolean showHotCandidates {get;set;}
    public Boolean showCVSellOut {get;set;}
    public Boolean showTriggers {get;set;}

    public WhiteTabController() {
        showRAG = false;
        showHotCandidates = false;
        showCVSellOut = false;
        showTriggers = false;
    }

    public void setRAG() {
        showRAG = true;
        showHotCandidates = false;
        showCVSellOut = false;
        showTriggers = false;
    }
    public void setHotCandidates() {
        showRAG = false;
        showHotCandidates = true;
        showCVSellOut = false;
        showTriggers = false;
    }
    public void setCVSellOut() {
        showRAG = false;
        showHotCandidates = false;
        showCVSellOut = true;
        showTriggers = false;
    }
    public void setTriggers() {
        showRAG = false;
        showHotCandidates = false;
        showCVSellOut = false;
        showTriggers = true;
    }
}

Answer 1

A debugging test you can do. Add an outputpanel that is rerendered everytime someone clicks on your divs. That panel should include your boolean values so you can double check your class is setting them correctly and they're getting updated on the page when you expect.

You can also probably remove many of your duplicated based on your code it is nearly the whole page.

You can also try replacing one of the outputpanels with a link and see if your behavior changes. My guess is your onclick action support isn't firing properly and therefore your boolean values aren't getting updated via the class.

You can also replace the action support with an actionFunction and an "onclick" example:

<apex:actionFunction name="datRAG" action="{!setRAG}" rerender="container" />
<apex:outputPanel styleClass="sectionbox" layout="block" onclick="datRAG()">RAG</apex:outputPanel>