How can I adapt the Wikibooks Vertical Menu example for Orbeon Forms?

Question

I'm looking for help implementing a vertical menu with Orbeon. Here is an example of what I'm looking for: http://en.wikibooks.org/wiki/XForms/Vertical_Menu .

Any pointers on how to go about implementing this? Here's what I have so far:

   <fr:button>
     <xforms:label ref="$form-resources/section-1/label"/>
     <xforms:toggle case="case-1" ev:event="DOMActivate" />
   </fr:button>
   <fr:button>
     <xforms:label ref="$form-resources/section-2/label"/>
     <xforms:toggle case="case-2" ev:event="DOMActivate" />
   </fr:button>
   <xforms:switch>
     <xforms:case id="case-1" selected="true()">
              ...

This is close, but the buttons don't stay highlighted as the user clicks around the screen. Ideally, the button would stay highlighted unless another button was clicked.

Update: I'm more interested in the visualization (vertical button menu to choose a form section to display, with the button for the section appearing to be toggled or pushed down while the section is displayed).

Answer 1

The example you point to is using the target pseudo-class to highlight the current tab through CSS. On IE, only version 9 onwards supports the target pseudo-class, limiting the practicality of this technique.

Still, if you are happy with it, you could do the same thing with Orbeon Forms. In the example you point to, the target is changed with an <a href="#tab1">. In your code using Orbeon Forms, you could use an <xforms:load>, as in:

<fr:button>
    <xforms:label>Select Items</xforms:label>
    <xforms:action ev:event="DOMActivate">
        <xforms:toggle case="case-2"/>
        <xforms:load resource="#tab1"/>
    </xforms:action>
</fr:button>