CSS
Hover the classes to see matching element(s) in the example
xfContainer matches any Element that represents a XForms group | repeat | switch element
xfSwitch matches an Element that represents a XForms switch element
xfCase matches an Element that represents a XForms case element
bfTabContainer matches an Element that represents a XForms switch element and is rendered as a Dojo TabContainer
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control

# XForms switch rendered as tabcontainer

A switch Element with appearance attribute set to 'dijit.TabContainer' will be rendered as a tabbed panel which can be toggled by clicking a card or by navigating the cards with the keyboard.

As the author might need other actions besides simply activating another case ( to e.g. prepare data for the new view) we need a explicit trigger that toggles the wanted case. On the other hand when the user clicks a tab we have to let the processor know which trigger has to run for the switching.

To allow mapping from active case to the trigger that performs the switch you have to follow a convention to achieve the mapping:

1. write one trigger for each case
2. give the trigger an id of 't-' + CASE_ID where CASE_ID references the respective case you want to activate
3. put all triggers inside a div which you hide from display with a style="display:none;"
4. write your switch as normal and give it an appearance of 'dijit.TabContainer.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

Switch / Case
Case 1 Case 2 Case 3 Case 4
Case 1

## CASE 1

This is some content for the first case

Case 2

## CASE 2

This is some content for the second case

Case 3

## CASE 3

This is some content for the third case

Case 4

## CASE 4

This is some content for the fourth case

## XForms Markup

    <xf:group>
        <xf:label>Switch / Case</xf:label>
        <div style="display:none;">
            <xf:trigger id="t-case1">
                <xf:label>Case 1</xf:label>
                <xf:toggle case="case1"></xf:toggle>
            </xf:trigger>
            <xf:trigger id="t-case2">
                <xf:label>Case 2</xf:label>
                <xf:toggle case="case2"></xf:toggle>
            </xf:trigger>
            <xf:trigger id="t-case3">
                <xf:label>Case 3</xf:label>
                <xf:toggle case="case3"></xf:toggle>
            </xf:trigger>
            <xf:trigger id="t-case4">
                <xf:label>Case 4</xf:label>
                <xf:toggle case="case4"></xf:toggle>
            </xf:trigger>
        </div>
        <xf:switch id="switch1" appearance="dijit:TabContainer">
            <xf:case id="case1" selected="true">
                <xf:label>Case 1</xf:label>
                <div class="caseContent" style="background:#bbbbff">
                    <h2>CASE 1</h2>
                    <p>This is some content for the first case</p>
                </div>
            </xf:case>
            <xf:case id="case2">
                <xf:label>Case 2</xf:label>
                <div class="caseContent" style="background:#ccccff">
                    <h2>CASE 2</h2>
                    <p>This is some content for the second case</p>
                </div>
            </xf:case>
            <xf:case id="case3">
                <xf:label>Case 3</xf:label>
                <div class="caseContent" style="background:#ddddff">
                    <h2>CASE 3</h2>
                    <p>This is some content for the third case</p>
                </div>
            </xf:case>
            <xf:case id="case4">
                <xf:label>Case 4</xf:label>
                <div class="caseContent" style="background:#eeeeff">
                    <h2>CASE 4</h2>
                    <p>This is some content for the fourth case</p>
                </div>
            </xf:case>
        </xf:switch>
    </xf:group>

## Notes

'bfTabContainer' class sets a fixed width in betterform.css. I you like to change the size you should overwrite this rule. E.g. the example above sets a height of 300px.