1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<xhtml:html xmlns:xforms="http://www.w3.org/2002/xforms"
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns:ev="http://www.w3.org/2001/xml-events">

    <xhtml:head>
        <xhtml:title>Single toggling with a select1</xhtml:title>
        <xforms:model>
            <xforms:instance id="selection">
                <selection>1</selection>
            </xforms:instance>
        </xforms:model>
    </xhtml:head>
    <xhtml:body>

        <xforms:select1 ref="instance('selection')" appearance="minimal">
            <xforms:label>Select: </xforms:label>
            <xforms:item>
                <xforms:label>First</xforms:label>
                <xforms:value>1</xforms:value>
            </xforms:item>
            <xforms:item>
                <xforms:label>Second</xforms:label>
                <xforms:value>2</xforms:value>
            </xforms:item>
            <!-- Solution with AVT -->
            <!--<xforms:toggle ev:event="xforms-value-changed" case="case{.}"/>-->
            <!-- Solution with nested case element-->
            <xforms:toggle ev:event="xforms-value-changed">
                <xforms:case value="concat('case', .)"/>
            </xforms:toggle>
        </xforms:select1>

        <xforms:switch>
            <xforms:case id="case1">
                Case 1
            </xforms:case>
            <xforms:case id="case2">
                Case 2
            </xforms:case>
        </xforms:switch>

    </xhtml:body>
</xhtml:html>