How would I implement a button control for an apex:panelBar?

Question

How would I implement a button control for an apex:panelBar? I have a Previous and Next button that increase/decrease the selectedTabNumber, it updates the {!selectedTabNumber} correctly and my if statement is correct but it does not seem to have an effect on the expanded="{!IF(selectedTabNumber == tab.tabnumber, true, false)}" attribute in the apex:panelBarItem. What am I missing?

Thanks, Matt

<div><apex:commandButton reRender="tabPanel" action="{!prevSection}" value="Previous"/>&nbsp;
    <apex:commandButton reRender="tabPanel" action="{!nextSection}" value="Next"/>&nbsp;
</div> 

<apex:panelBar id="tabPanel" items="{!tabs}" var="tab" switchType="server" headerClass="panel" headerClassActive="panelActive">
<apex:panelBarItem expanded="{!IF(selectedTabNumber == tab.tabnumber, true, false)}" label="{!tab.tabName}" >
    selected {!selectedTabNumber} of {!tab.tabnumber} this tab {!IF(selectedTabNumber == tab.tabnumber, true, false)}

Answer 1

One general thing I do when debugging tab panels and panel bars is to play with the switchType value. In your case, try making the switchtype "client" or "ajax" to see if that effects rendering.

Also, first try this without using your command buttons that are rerendering the entire panelBar component. For example (from the Visualforce Developer's Guide):

<!-- Page: panelBar -->
<!-- Click on Item 1, Item 2, or Item 3 to display the content of the panel -->
<apex:page>
  <apex:panelBar>
    <apex:panelBarItem label="Item 1">data 1</apex:panelBarItem>
    <apex:panelBarItem label="Item 2">data 2</apex:panelBarItem>
    <apex:panelBarItem label="Item 3">data 3</apex:panelBarItem>
  </apex:panelBar>
</apex:page>

<!-- Page: panelBarItemEvents -->
<apex:page >
  <apex:pageMessages/>
  <apex:panelBar>
    <apex:panelBarItem label="Item One" onenter="alert('Entering item one');" onleave="alert('Leaving item one');">
      Item one content
    </apex:panelBarItem>
    <apex:panelBarItem label="Item Two" onenter="alert('Entering item two');" onleave="alert('Leaving item two');">
      Item two content
    </apex:panelBarItem>
  </apex:panelBar>
</apex:page>

In other words, I don't believe you should be rerendering the entire panelBar component. Instead, the ajax server trips are handled for you and will optionally render the appropriate panelBarItem based on the selected item.