<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>CSS: a tabbed interface</title>
        <style type="text/css">
            @namespace xf url("http://www.w3.org/2002/xforms");
            
            /* Put the tab divs all on one line */
            div.horiz-tabs-menu {
            display: inline;
            }		
            
            /* style each individual tab */
            div.horiz-tabs-menu xf|trigger.tab {
            color: black;
            border: 0.1em outset #BBB;	/* Make it look like a button */
            border-bottom: 0.1em solid #CCC;
            font-weight: bold;
            font-family: Helvetica, sans-serif;
            text-decoration: none;
            margin-right: 5px;
            padding: 0.2em;
            /* round the top corners - works under FireFox */
            -moz-border-radius: .5em .5em 0em 0em;
            }
            
            /* Make non-selected (disabled) tabs appear in the background */
            div.horiz-tabs-menu xf|trigger.tab:disabled {
            /* by default disabled (non relevant) items are not displayed, 
            so they need to be displayed to be in the background */
            display: inline;
            border-bottom: none;
            background: #999;
            }		
            
            /* Make the selected (enabled) item or default selection to appear on top */
            div.horiz-tabs-menu xf|trigger.tab:enabled {
            border-bottom: 0.1em solid #CCC;
            background: #CCC;
            }
            
            xf|switch xf|case div {
            background: #CCC;   /* Light gray */
            padding: 0.3em;     /* Looks better */
            }	
        </style>
        
        <xf:model id="tab-handling">
            <xf:instance xmlns="" id="tabs">
                <tabs>
                    <tab title="Tab 1" selected="true"/>
                    <tab title="Tab 2" selected="false"/>
                    <tab title="Tab 3" selected="false"/>
                </tabs>
            </xf:instance>
            
            <xf:bind nodeset="instance('tabs')/tab" relevant="@selected = 'true'" type="xs:boolean"/>
        </xf:model>
        
    </head>
    
    <body>
        <xf:group model="tab-handling" ref="instance('tabs')">
            <div class="horiz-tabs-menu">
                <xf:trigger ref="tab[1]" class="tab" appearance="minimal">
                    <xf:label><xf:output ref="@title"/></xf:label>
                    <xf:toggle ev:event="DOMActivate" case="case-1"/>
                </xf:trigger>
                <xf:trigger ref="tab[2]" class="tab" appearance="minimal">
                    <xf:label><xf:output ref="@title"/></xf:label>
                    <xf:toggle ev:event="DOMActivate" case="case-2"/>
                </xf:trigger>
                <xf:trigger ref="tab[3]" class="tab" appearance="minimal">
                    <xf:label><xf:output ref="@title"/></xf:label>
                    <xf:toggle ev:event="DOMActivate" case="case-3"/>
                </xf:trigger>
            </div>
        </xf:group>
        
        <xf:switch>
            <xf:case id="case-1" selected="true()">
                
                <xf:setvalue model="tab-handling" ev:event="xforms-select" 
                    ref="instance('tabs')/tab[1]/@selected" value="true()"/>
                <xf:setvalue model="tab-handling" ev:event="xforms-deselect" 
                    ref="instance('tabs')/tab[1]/@selected" value="false()"/>
                
                <div>
                    1111111111 1111111111 1111111111
                    1111111111 1111111111 1111111111
                    1111111111 1111111111 1111111111
                    1111111111 1111111111 1111111111
                </div>
            </xf:case>
            <xf:case id="case-2">
                
                <xf:setvalue model="tab-handling" ev:event="xforms-select" 
                    ref="instance('tabs')/tab[2]/@selected" value="true()"/>
                <xf:setvalue model="tab-handling" ev:event="xforms-deselect" 
                    ref="instance('tabs')/tab[2]/@selected" value="false()"/>
                
                <div>
                    2222222222 2222222222 2222222222
                    2222222222 2222222222 2222222222
                    2222222222 2222222222 2222222222
                    2222222222 2222222222 2222222222
                </div>
            </xf:case>
            <xf:case id="case-3">
                
                <xf:setvalue model="tab-handling" ev:event="xforms-select" 
                    ref="instance('tabs')/tab[3]/@selected" value="true()"/>
                <xf:setvalue model="tab-handling" ev:event="xforms-deselect" 
                    ref="instance('tabs')/tab[3]/@selected" value="false()"/>
                
                <div>
                    3333333333 3333333333 3333333333
                    3333333333 3333333333 3333333333
                    3333333333 3333333333 3333333333
                    3333333333 3333333333 3333333333
                </div>
            </xf:case>
        </xf:switch>
    </body>
</html>