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

<!DOCTYPE html> 
<html class="ui-mobile-rendering"> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Collapsible Content</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
	<script src="../../js/jquery.js"></script>
</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Collapsible sets (Accordions)</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">
		
		<h2>Collapsible set markup</h2>
		<p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsible sets.</p>
		<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>

	<pre><code>		
<strong>&lt;div data-role="collapsible-set"&gt;</strong>

	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;</strong>&gt;
	&lt;h3&gt;Section 1&lt;/h3&gt;
	&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
	&lt;/div&gt;
	
	&lt;div data-role=&quot;collapsible&quot;&gt;
	&lt;h3&gt;Section 2&lt;/h3&gt;
	&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
	&lt;/div&gt;
	
<strong>&lt;/div&gt;</strong>
	</code></pre>	
	

		<p>Here is an example of a collapsible set with 5 sections.</p>
		
		<div data-role="collapsible-set">
			<div data-role="collapsible" data-collapsed="false">
				<h3>Section 1</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 2</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. 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">
				<h3>Section 3</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. 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">
				<h3>Section 4</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. 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">
				<h3>Section 5</h3>
				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>

			</div>
		</div>

		<h2>Theming collapsible content</h2>
		<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>


<pre><code>		
&lt;div data-role=&quot;collapsible-set&quot; <strong>data-theme=&quot;c&quot; data-content-theme=&quot;d&quot;</strong>&gt;
</code></pre>	


		<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
			<div data-role="collapsible">
				<h3>Section 1</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 2</h3>
				<p>Collapsible content</p>

			</div>
			<div data-role="collapsible">
				<h3>Section 3</h3>
				<p>Collapsible content</p>
			</div>
		</div>


		<h2>Theming individual sections</h2>
		<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>

		<div data-role="collapsible-set" data-content-theme="c">
			<div data-role="collapsible" data-theme="b" data-content-theme="b">
				<h3>Section header, swatch B</h3>
				<p>Collapsible content, swatch B</p>

			</div>
			<div data-role="collapsible" data-theme="a" data-content-theme="a">
				<h3>Section header, swatch A</h3>
				<p>Collapsible content, swatch A</p>
			</div>
			<div data-role="collapsible" data-theme="e" data-content-theme="d">
				<h3>Section header, swatch E</h3>
				<p>Collapsible content, swatch D</p>
			</div>
		</div>
		
	</div><!--/content-primary -->		
	
	<div class="content-secondary">
		
		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
			
				<h3>More in this section</h3>
				
				<ul data-role="listview" data-theme="c" data-dividertheme="d">
				
					<li data-role="list-divider">Content Formatting</li>
					<li><a href="content-html.html">Basic HTML styles</a></li>
					<li><a href="content-grids.html">Layout grids (columns)</a></li>
					<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
					<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
					<li><a href="content-themes.html">Theming content</a></li>
	
				</ul>
		</div>
	</div>		

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
		<p>&copy; 2011 The jQuery Project</p>
</div>
	
</div><!-- /page -->

</body>
</html>
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<!DOCTYPE html>`
add ui-mobile-rendering to docs to temprarily prevent fouc with async load. @gseguin to address with jqm-docs.js change 2012-01-04 21:59:17 +00:00			`<html class="ui-mobile-rendering">`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<head>`
			`<meta charset="utf-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`
			`<title>jQuery Mobile Docs - Collapsible Content</title>`
Updated docs’ CSS to use new @import scheme. 2012-01-10 21:35:08 +00:00			`<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>`
Move require.js to first tag so it can catch jquery module registration Otherwise jquery may be loaded twice 2012-01-13 05:25:59 +00:00
Added require.js 1.0.3 as a submodule 2011-12-24 08:48:08 +00:00			`<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>`
Move require.js to first tag so it can catch jquery module registration Otherwise jquery may be loaded twice 2012-01-13 05:25:59 +00:00			`<script src="../../js/jquery.js"></script>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`</head>`
			`<body>`

			`<div data-role="page" class="type-interior">`

			`<div data-role="header" data-theme="f">`
			`<h1>Collapsible sets (Accordions)</h1>`
			`<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>`
			`</div><!-- /header -->`

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

			`<h2>Collapsible set markup</h2>`
Added links to the data- attribute reference to key pages, removed old API pages 2011-11-14 02:13:53 +00:00			<p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsible sets.</p>
Fix for small typo in collapsible-set docs page 2011-08-22 19:30:11 +00:00			`<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00
			`<pre><code>`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<strong><div data-role="collapsible-set"></strong>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<div data-role="collapsible" <strong>data-collapsed="false"</strong>>`
			`<h3>Section 1</h3>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<p>I'm the collapsible set content for section B.</p>`
			`</div>`

			`<div data-role="collapsible">`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h3>Section 2</h3>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<p>I'm the collapsible set content for section B.</p>`
			`</div>`

Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<strong></div></strong>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`</code></pre>`


			`<p>Here is an example of a collapsible set with 5 sections.</p>`

			`<div data-role="collapsible-set">`
			`<div data-role="collapsible" data-collapsed="false">`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h3>Section 1</h3>`
			`<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`</div>`
			`<div data-role="collapsible">`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h3>Section 2</h3>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<p>I'm the collapsible content in a set so this feels like an accordion. 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">`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h3>Section 3</h3>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<p>I'm the collapsible content in a set so this feels like an accordion. 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">`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h3>Section 4</h3>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<p>I'm the collapsible content in a set so this feels like an accordion. 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">`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h3>Section 5</h3>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>`
Added doc/sample for data-content-theme 2011-09-22 16:49:36 +00:00
			`</div>`
			`</div>`

Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h2>Theming collapsible content</h2>`
			`<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>`
Added doc/sample for data-content-theme 2011-09-22 16:49:36 +00:00
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00
			`<pre><code>`
			`<div data-role="collapsible-set" <strong>data-theme="c" data-content-theme="d"</strong>>`
			`</code></pre>`


			`<div data-role="collapsible-set" data-theme="c" data-content-theme="d">`
			`<div data-role="collapsible">`
			`<h3>Section 1</h3>`
			`<p>Collapsible content</p>`
Added doc/sample for data-content-theme 2011-09-22 16:49:36 +00:00			`</div>`
			`<div data-role="collapsible">`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h3>Section 2</h3>`
			`<p>Collapsible content</p>`
Added doc/sample for data-content-theme 2011-09-22 16:49:36 +00:00
			`</div>`
			`<div data-role="collapsible">`
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<h3>Section 3</h3>`
			`<p>Collapsible content</p>`
			`</div>`
			`</div>`


			`<h2>Theming individual sections</h2>`
			`<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00
Added improved collpsible theming docs 2011-09-26 20:21:32 +00:00			`<div data-role="collapsible-set" data-content-theme="c">`
			`<div data-role="collapsible" data-theme="b" data-content-theme="b">`
			`<h3>Section header, swatch B</h3>`
			`<p>Collapsible content, swatch B</p>`

			`</div>`
			`<div data-role="collapsible" data-theme="a" data-content-theme="a">`
			`<h3>Section header, swatch A</h3>`
			`<p>Collapsible content, swatch A</p>`
			`</div>`
			`<div data-role="collapsible" data-theme="e" data-content-theme="d">`
			`<h3>Section header, swatch E</h3>`
			`<p>Collapsible content, swatch D</p>`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00			`</div>`
			`</div>`

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

			`<div class="content-secondary">`

adjusted the presentation of the left nav and footer for the docs 2011-09-29 20:35:31 +00:00			`<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">`
Moved collapsible sets (accordions) into a standalone page for better visibility, updated section nav on other pages and index page to link to it. 2011-06-22 16:01:13 +00:00
			`<h3>More in this section</h3>`

			`<ul data-role="listview" data-theme="c" data-dividertheme="d">`

			`<li data-role="list-divider">Content Formatting</li>`
			`<li><a href="content-html.html">Basic HTML styles</a></li>`
			`<li><a href="content-grids.html">Layout grids (columns)</a></li>`
			`<li><a href="content-collapsible.html">Collapsible content blocks</a></li>`
			`<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>`
			`<li><a href="content-themes.html">Theming content</a></li>`

			`</ul>`
			`</div>`
			`</div>`

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

			`<div data-role="footer" class="footer-docs" data-theme="c">`
			`<p>© 2011 The jQuery Project</p>`
			`</div>`

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

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