<?xml-stylesheet href="../forms/xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://www.w3.org/1999/xhtml"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
>
<head>
	<title>Tabs</title>
	<style type="text/css">
	body { font-family: sans-serif; padding: 0; margin: 0}
	.h {font-weight: bold}
	#togglehome {background: #aaf; }
	#toggleproducts {background: #faa}
	#togglesupport {background: #ffa}
	#togglecontact {background: #afa}

	#home {border-top: 2em solid #aaf}
	#products {border-top: 2em solid #faa}
	#support {border-top: 2em solid #ffa}
	#contact {border-top: 2em solid #afa}

	#togglehome,
	#toggleproducts, 
	#togglesupport, 
	#togglecontact {padding: 1ex}

	#togglehome { border-right: thin black solid; }

	#toggleproducts, 
	#togglesupport, 
	#togglecontact {
		border-top: thin black solid; 
		border-left: thin black solid;} 

	#togglecontact {
		border-right: thin black solid; }

	#home,
	#products, 
	#support, 
	#contact {padding: 1em 1em 2em 1em } 
	</style> 

	<model xmlns="http://www.w3.org/2002/xforms">
		<instance><data/></instance>
	</model>
</head>
<body>
    <group xmlns="http://www.w3.org/2002/xforms">
	<trigger id="togglehome" appearance="minimal">
	    <label>Home</label>
	    <toggle case="home" ev:event="DOMActivate"/>
	</trigger>
	<trigger id="toggleproducts" appearance="minimal">
	    <label>Products</label>
	    <toggle case="products" ev:event="DOMActivate"/>
	</trigger>
	<trigger id="togglesupport" appearance="minimal">
	    <label>Support</label>
	    <toggle case="support" ev:event="DOMActivate"/>
	</trigger>
       <trigger id="togglecontact" appearance="minimal">
	    <label>Contact</label>
	    <toggle case="contact" ev:event="DOMActivate"/>
	</trigger>
	<switch>
	    <case id="home">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<h1>Home</h1>
			<p>Welcome to our home page...</p>
		</div>
	    </case>
	    <case id="products">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<h1>Products</h1>
			<p>We produce many fine products ...</p>
		</div>
	    </case>
	    <case id="support">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<h1>Support</h1>
			<p>For support please ring the following toll-number ...</p>
		</div>
	    </case>
	    <case id="contact">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<h1>Contact</h1>
			<p>For all contact, send an email to ...</p>
		</div>
	    </case>
	</switch>
    </group>
</body>
</html>
