<div id="accordion" data-dojo-type="dojox.mobile.View">
	<ul data-dojo-type="dojox.mobile.TabBar" 
		data-dojo-props='barType:"segmentedControl", fixed:"top"'>
		<li data-dojo-type="dojox.mobile.TabBarButton" 
			data-dojo-props='moveTo:"accordionView1"'>Fixed</li>
		<li data-dojo-type="dojox.mobile.TabBarButton" 
			data-dojo-props='moveTo:"accordionView2", selected:true'>Multi</li>
		<li data-dojo-type="dojox.mobile.TabBarButton" 
			data-dojo-props='moveTo:"accordionView3"'>Single</li>
	</ul>

	<div id="accordionView1" data-dojo-type="dojox.mobile.ScrollableView">
		<div data-dojo-type="dojox.mobile.Accordion" 
			data-dojo-props='fixedHeight:true' style="height:400px;">
			<div data-dojo-type="dojox.mobile.ScrollableView" 
				style="background-color:white"
				data-dojo-props='label:"ScrollableView", height:"inherit", 
					icon1:"mblDomButtonBlackRightArrow16", 
					icon2:"mblDomButtonWhiteDownArrow16", 
					propagatable:false, appBars:false'>
				<div style="padding:10px;color:black;">
					A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>
					K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>
					U<br>V<br>W<br>X<br>Y<br>Z
				</div>
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"External Content", 
					icon1:"mblDomButtonBlackRightArrow16", 
					icon2:"mblDomButtonWhiteDownArrow16", 
					href:"data/fragment1.html"'
				class="accordionPane">
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"RoundRectList", 
					icon1:"mblDomButtonBlackRightArrow16", 
					icon2:"mblDomButtonWhiteDownArrow16"'>
				<ul data-dojo-type="dojox.mobile.RoundRectList" 
					data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
					<li data-dojo-type="dojox.mobile.ListItem" 
						data-dojo-props='rightText:"Off"'>
						u1space
					</li>
					<li data-dojo-type="dojox.mobile.ListItem" 
						data-dojo-props='rightText:"Off"'>
						u2space
					</li>
					<li data-dojo-type="dojox.mobile.ListItem" 
						data-dojo-props='rightText:"Off"'>
						Wi-Fi
					</li>
				</ul>
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"Dojo", 
					icon1:"mblDomButtonBlackRightArrow16", 
					icon2:"mblDomButtonWhiteDownArrow16"' 
				class="accordionPane">
				<div style="padding:10px">
					<div style="font-size: 24px">Unbeatable JavaScript Tools</div>
					<div style="border-top: 1px dashed gray;margin: 20px"></div>
					<img alt="" src="images/dojoLogo.png" 
						style="float:left;margin-right:5px">
					<p>Dojo saves you time, delivers powerful performance, 
						and scales with your development process. 
						It's the toolkit experienced developers turn to for 
						building superior desktop and mobile web experiences.
					</p>
					<p>Dojo's powerful, lightweight core makes common tasks 
						quicker and easier. Animate elements, manipulate the DOM, 
						and query with easy CSS syntax, all without sacrificing 
						performance.
					</p>
				</div>
			</div>
		</div>
	</div>
	
	<div id="accordionView2" data-dojo-type="dojox.mobile.ScrollableView" 
		data-dojo-props='selected:true'>
		<div data-dojo-type="dojox.mobile.Accordion" 
			data-dojo-props='iconBase:"images/icons16.png"'>
			<div data-dojo-type="dojox.mobile.ScrollableView" 
				style="background-color:white"
				data-dojo-props='label:"ScrollableView", iconPos1:"16,16,16,16", 
					height:"100px", propagatable:false, appBars:false'>
				<div style="padding:10px;color:black;">
					A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>
					K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>
					U<br>V<br>W<br>X<br>Y<br>Z
				</div>
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"External Content", iconPos1:"16,32,16,16", 
					href:"data/fragment1.html"'>
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"RoundRectList", iconPos1:"16,48,16,16"'>
				<ul data-dojo-type="dojox.mobile.RoundRectList" 
					data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
					<li data-dojo-type="dojox.mobile.ListItem" 
						data-dojo-props='rightText:"Off"'>
						u1space
					</li>
					<li data-dojo-type="dojox.mobile.ListItem" 
						data-dojo-props='rightText:"Off"'>
						u2space
					</li>
					<li data-dojo-type="dojox.mobile.ListItem" 
						data-dojo-props='rightText:"Off"'>
						Wi-Fi
					</li>
				</ul>
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"Dojo", iconPos1:"32,16,16,16"' 
				class="accordionPane">
				<div style="padding:10px">
					<div style="font-size: 24px">Unbeatable JavaScript Tools</div>
					<div style="border-top: 1px dashed gray;margin: 20px"></div>
					<img alt="" src="images/dojoLogo.png" 
						style="float:left;margin-right:5px">
					<p>Dojo saves you time, delivers powerful performance, 
						and scales with your development process. 
						It's the toolkit experienced developers turn to for 
						building superior desktop and mobile web experiences.
					</p>
					<p>Dojo's powerful, lightweight core makes common tasks 
						quicker and easier. Animate elements, manipulate the DOM, 
						and query with easy CSS syntax, all without sacrificing 
						performance.
					</p>
				</div>
			</div>
		</div>
	</div>
	
	<div id="accordionView3" data-dojo-type="dojox.mobile.ScrollableView">
		<div data-dojo-type="dojox.mobile.Accordion" data-dojo-props='singleOpen:true'>
			<div data-dojo-type="dojox.mobile.ScrollableView" style="background-color:white"
				data-dojo-props='label:"ScrollableView", height:"100px", 
					propagatable:false, appBars:false'>
				<div style="padding:10px;color:black;">
					A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>
					K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>
					U<br>V<br>W<br>X<br>Y<br>Z
				</div>
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"External Content", href:"data/fragment1.html"'>
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"RoundRectList"'>
				<ul data-dojo-type="dojox.mobile.RoundRectList" 
					data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
					<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
						u1space
					</li>
					<li data-dojo-type="dojox.mobile.ListItem" 
						data-dojo-props='rightText:"Off"'>
						u2space
					</li>
					<li data-dojo-type="dojox.mobile.ListItem" 
						data-dojo-props='rightText:"Off"'>
						Wi-Fi
					</li>
				</ul>
			</div>
			<div data-dojo-type="dojox.mobile.ContentPane" 
				data-dojo-props='label:"Dojo"' class="accordionPane">
				<div style="padding:10px">
					<div style="font-size: 24px">Unbeatable JavaScript Tools</div>
					<div style="border-top: 1px dashed gray;margin: 20px"></div>
					<img alt="" src="images/dojoLogo.png" 
						style="float:left;margin-right:5px">
					<p>Dojo saves you time, delivers powerful performance, 
						and scales with your development process. 
						It's the toolkit experienced developers turn to for 
						building superior desktop and mobile web experiences.
					</p>
					<p>Dojo's powerful, lightweight core makes common tasks 
						quicker and easier. Animate elements, manipulate the DOM, 
						and query with easy CSS syntax, all without sacrificing 
						performance.
					</p>
				</div>
			</div>
		</div>
	</div>
</div>	
