jquery-mobile/docs/content/content-collapsible.html

<!DOCTYPE html> 
<html> 
	<head> 
	<title>jQuery Mobile Docs - Content formatting</title> 
	<link rel="stylesheet"  href="../../themes/default" /> 
	<script type="text/javascript" src="../../js/all"></script>
	

</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Collapsible content</h1>
	</div><!-- /header -->

	<div data-role="content">
		
		<h2>Collapsible content markup</h2>
		<p>To create a collapsible blocks of content, create a container and add the <code>data-role="collapsible"</code> attribute.</p>
		
		<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
	
		<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>

	<pre><code>		
	&lt;div data-role=&quot;collapsible&quot;&gt;
	&lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
	&lt;p&gt;I&#x27;m the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.&lt;/p&gt;
	&lt;/div&gt;
	</pre></code>	
	

			<div data-role="collapsible">
				<h3>I'm a header</h3>
				<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			</div>


		<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>

	<code>		
	&lt;div data-role=&quot;collapsible&quot; <strong>data-state=&quot;collapsed&quot;&gt;</strong>
	</code>

		<p>This code will create a collapsible widget like this:</p>
	

			<div data-role="collapsible" data-state="collapsed">
				<h3>I'm a header</h3>
				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
	
		<p>Collapsible content is minimally styled &mdash; we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>

		<h2>Collapsible example</h2>
		<p>This page has 4 collapsible containers with different types of content inside.</p>
		
		<div data-role="collapsible" data-state="collapsed">
			<h3>Section 1: Collapsed text block</h3>
			<p>I'm closed when the page loads because I have the <code>data-state="collapsed"</code> attribute on my container. </p>
			<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
		</div><!-- /section 1 -->
		
		<div data-role="collapsible">
			<h3>Section 2: Expanded on load</h3>
			<p>I'm open when the page loads because I don't have the <code>data-state="collapsed"</code> attribute on my container. </p>
			<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
		</div><!-- /section 2 -->
		
		<div data-role="collapsible" data-state="collapsed">
			<h3>Section 3: Form elements</h3>
			<form action="#" method="get">
				<div data-role="fieldcontain">
					<label for="textarea">Textarea:</label>
					<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
				</div>
				<div data-role="fieldcontain">
					<label for="slider">Input slider:</label>
				 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
				</div>
				<fieldset class="ui-grid-a">
						<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
						<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
			    </fieldset>
			</form>
		</div><!-- /section 3 -->
	
		<div data-role="collapsible" data-state="collapsed">
			<h3>Section 4: Collapsed list</h3>
			<ul data-role="listview" data-inset="true" data-theme="d">
				<li><a href="index.html">Acura</a></li>
				<li><a href="index.html">Audi</a></li>
				<li><a href="index.html">BMW</a></li>
				<li><a href="index.html">Cadillac</a></li>
				<li><a href="index.html">Chrysler</a></li>
				<li><a href="index.html">Dodge</a></li>
				<li><a href="index.html">Ferrari</a></li>
				<li><a href="index.html">Ford</a></li>
			</ul>
		</div><!-- /section 4 -->
		
		<h2>Nested Collapsibles</h2>
		<div data-role="collapsible">
			<h3>I'm a header</h3>
			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			<div data-role="collapsible">
				<h3>I'm a nested collapsible header</h3>
				<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
			</div>
		</div>
		
		<h2>Collapsible sets</h2>
		<p>By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:</p>
		
		<div data-role="collapsible-set">
			<div data-role="collapsible">
				<h3>I'm a header in a set of collapsibles</h3>
				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
			<div data-role="collapsible" data-state="collapsed">
				<h3>I'm a header in a set of collapsibles</h3>
				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
			<div data-role="collapsible" data-state="collapsed">
				<h3>I'm a header in a set of collapsibles</h3>
				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
			</div>
		</div>
		
	
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<title>jQuery Mobile Docs - Content formatting</title>`
fixed css references in markup 2010-10-23 13:01:31 +00:00			`<link rel="stylesheet" href="../../themes/default" />`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00			`<script type="text/javascript" src="../../js/all"></script>`


			`</head>`
			`<body>`

			`<div data-role="page">`

			`<div data-role="header">`
			`<h1>Collapsible content</h1>`
			`</div><!-- /header -->`

			`<div data-role="content">`

			`<h2>Collapsible content markup</h2>`
			`<p>To create a collapsible blocks of content, create a container and add the <code>data-role="collapsible"</code> attribute.</p>`

			`<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>`

edits 2010-10-16 03:14:21 +00:00			`<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00
			`<pre><code>`
			`<div data-role="collapsible">`
			`<h3>I'm a header</h3>`
edits 2010-10-16 03:14:21 +00:00			`<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00			`</div>`
			`</pre></code>`


edits 2010-10-16 03:14:21 +00:00			`<div data-role="collapsible">`
			`<h3>I'm a header</h3>`
			`<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>`
			`</div>`


			`<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00
			`<code>`
			`<div data-role="collapsible" <strong>data-state="collapsed"></strong>`
			`</code>`

			`<p>This code will create a collapsible widget like this:</p>`


			`<div data-role="collapsible" data-state="collapsed">`
			`<h3>I'm a header</h3>`
edit 2010-10-16 03:19:27 +00:00			`<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00			`</div>`

edit 2010-10-16 03:18:09 +00:00			`<p>Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00
			`<h2>Collapsible example</h2>`
			`<p>This page has 4 collapsible containers with different types of content inside.</p>`

			`<div data-role="collapsible" data-state="collapsed">`
			`<h3>Section 1: Collapsed text block</h3>`
			`<p>I'm closed when the page loads because I have the <code>data-state="collapsed"</code> attribute on my container. </p>`
			`<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>`
			`</div><!-- /section 1 -->`

			`<div data-role="collapsible">`
			`<h3>Section 2: Expanded on load</h3>`
			`<p>I'm open when the page loads because I don't have the <code>data-state="collapsed"</code> attribute on my container. </p>`
			`<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>`
			`</div><!-- /section 2 -->`

			`<div data-role="collapsible" data-state="collapsed">`
			`<h3>Section 3: Form elements</h3>`
			`<form action="#" method="get">`
			`<div data-role="fieldcontain">`
			`<label for="textarea">Textarea:</label>`
			`<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>`
			`</div>`
			`<div data-role="fieldcontain">`
			`<label for="slider">Input slider:</label>`
			`<input type="range" name="slider" id="slider" value="0" min="0" max="100" />`
			`</div>`
			`<fieldset class="ui-grid-a">`
			`<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>`
			`<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>`
			`</fieldset>`
			`</form>`
			`</div><!-- /section 3 -->`

			`<div data-role="collapsible" data-state="collapsed">`
			`<h3>Section 4: Collapsed list</h3>`
			`<ul data-role="listview" data-inset="true" data-theme="d">`
			`<li><a href="index.html">Acura</a></li>`
			`<li><a href="index.html">Audi</a></li>`
			`<li><a href="index.html">BMW</a></li>`
			`<li><a href="index.html">Cadillac</a></li>`
			`<li><a href="index.html">Chrysler</a></li>`
			`<li><a href="index.html">Dodge</a></li>`
			`<li><a href="index.html">Ferrari</a></li>`
			`<li><a href="index.html">Ford</a></li>`
			`</ul>`
			`</div><!-- /section 4 -->`

added support for grouped collapsibles that make accordions. Parent element just needs a data-role of collapsible-set. Fixes #87, Fixes #178 2010-10-23 14:20:06 +00:00			`<h2>Nested Collapsibles</h2>`
			`<div data-role="collapsible">`
			`<h3>I'm a header</h3>`
			`<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>`
			`<div data-role="collapsible">`
			`<h3>I'm a nested collapsible header</h3>`
			`<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>`
			`</div>`
			`</div>`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00
added support for grouped collapsibles that make accordions. Parent element just needs a data-role of collapsible-set. Fixes #87, Fixes #178 2010-10-23 14:20:06 +00:00			`<h2>Collapsible sets</h2>`
			`<p>By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:</p>`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00
added support for grouped collapsibles that make accordions. Parent element just needs a data-role of collapsible-set. Fixes #87, Fixes #178 2010-10-23 14:20:06 +00:00			`<div data-role="collapsible-set">`
			`<div data-role="collapsible">`
			`<h3>I'm a header in a set of collapsibles</h3>`
			`<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>`
			`</div>`
			`<div data-role="collapsible" data-state="collapsed">`
			`<h3>I'm a header in a set of collapsibles</h3>`
			`<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>`
			`</div>`
			`<div data-role="collapsible" data-state="collapsed">`
			`<h3>I'm a header in a set of collapsibles</h3>`
			`<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>`
			`</div>`
			`</div>`
re-vamped and simplied content docs 2010-10-13 21:39:54 +00:00

			`</div><!-- /content -->`
			`</div><!-- /page -->`

			`</body>`
			`</html>`