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
xfSelectedCase matches an Element that represents a selected XForms case element
xfDeselectedCase matches an Element that represents a non-selected XForms case element
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

A switch element is a container form control that allows the creation of user interfaces where the user interface can be varied based on user actions and events

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

Switch / Case Triggers outside Switch / Case Case 1 Case 2 Case 3 Case 4

## CASE 1

This is some content for the first case

## CASE 2

This is some content for the second case

## CASE 3

This is some content for the third case

## CASE 4

This is some content for the fourth case

## XForms Markup

    <xf:group>
        <xf:label class="blockLabel">Switch / Case</xf:label>
        <xf:group id="menu" appearance="minimal">
            <xf:label class="blockLabel">Triggers outside Switch / Case</xf:label>
            <xf:trigger style="clear:none">
                <xf:label>Case 1</xf:label>
                <xf:toggle case="switch1-case1"></xf:toggle>
            </xf:trigger>
            <xf:trigger style="clear:none">
                <xf:label>Case 2</xf:label>
                <xf:toggle case="switch1-case2"></xf:toggle>
            </xf:trigger>
            <xf:trigger style="clear:none">
                <xf:label>Case 3</xf:label>
                <xf:toggle case="switch1-case3"></xf:toggle>
            </xf:trigger>
            <xf:trigger style="clear:none">
                <xf:label>Case 4</xf:label>
                <xf:toggle case="switch1-case4"></xf:toggle>
            </xf:trigger>
        </xf:group>
        <xf:switch id="switch1">
            <xf:case id="switch1-case1" selected="true">
                <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="switch1-case2">
                <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="switch1-case3">
                <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="switch1-case4">
                <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>