Skip to content
This repository
Browse code

Moved collapsible sets (accordions) into a standalone page for better…

… visibility, updated section nav on other pages and index page to link to it.
  • Loading branch information...
commit a9fc1e06f84a15cb1b06ec75e3716f0b271f353f 1 parent 68a354e
Todd Parker authored June 22, 2011
106  docs/content/content-collapsible-set.html
... ...
@@ -0,0 +1,106 @@
  1
+<!DOCTYPE html> 
  2
+<html> 
  3
+	<head>
  4
+	<meta charset="utf-8">
  5
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
  6
+	<title>jQuery Mobile Docs - Collapsible Content</title> 
  7
+	<link rel="stylesheet"  href="../../themes/default/" />  
  8
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
  9
+	<script src="../../js/jquery.js"></script>
  10
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
  11
+	<script src="../_assets/js/jqm-docs.js"></script>
  12
+	<script src="../../js/"></script>
  13
+</head> 
  14
+<body> 
  15
+
  16
+	<div data-role="page" class="type-interior">
  17
+
  18
+		<div data-role="header" data-theme="f">
  19
+		<h1>Collapsible sets (Accordions)</h1>
  20
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  21
+	</div><!-- /header -->
  22
+
  23
+	<div data-role="content">
  24
+		<div class="content-primary">
  25
+		
  26
+		<h2>Collapsible set markup</h2>
  27
+		<p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a> except  of content. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute, this teels the framework to style and these as a grouped block and behave like and accordion where only one section can be open at a time.</p>
  28
+		<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-role="data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
  29
+
  30
+	<pre><code>		
  31
+&lt;div data-role="collapsible-set"&gt;
  32
+
  33
+	&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;false&quot;&gt;
  34
+	&lt;h3&gt;Section A&lt;/h3&gt;
  35
+	&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
  36
+	&lt;/div&gt;
  37
+	
  38
+	&lt;div data-role=&quot;collapsible&quot;&gt;
  39
+	&lt;h3&gt;Section B&lt;/h3&gt;
  40
+	&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
  41
+	&lt;/div&gt;
  42
+	
  43
+&lt;div&gt;
  44
+	</code></pre>	
  45
+	
  46
+
  47
+		<p>Here is an example of a collapsible set with 5 sections.</p>
  48
+		
  49
+		<div data-role="collapsible-set">
  50
+			<div data-role="collapsible" data-collapsed="false">
  51
+				<h3>Section A</h3>
  52
+				<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>
  53
+			</div>
  54
+			<div data-role="collapsible">
  55
+				<h3>Section B</h3>
  56
+				<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>
  57
+
  58
+			</div>
  59
+			<div data-role="collapsible">
  60
+				<h3>Section C</h3>
  61
+				<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>
  62
+
  63
+			</div>
  64
+			<div data-role="collapsible">
  65
+				<h3>Section D</h3>
  66
+				<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>
  67
+
  68
+			</div>
  69
+			<div data-role="collapsible">
  70
+				<h3>Section E</h3>
  71
+				<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>
  72
+
  73
+			</div>
  74
+		</div>
  75
+		
  76
+	</div><!--/content-primary -->		
  77
+	
  78
+	<div class="content-secondary">
  79
+		
  80
+		<div data-role="collapsible" data-collapsed="true" data-theme="b">
  81
+			
  82
+				<h3>More in this section</h3>
  83
+				
  84
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
  85
+				
  86
+					<li data-role="list-divider">Content Formatting</li>
  87
+					<li><a href="content-html.html">Basic HTML styles</a></li>
  88
+					<li><a href="content-grids.html">Layout grids (columns)</a></li>
  89
+					<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
  90
+					<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
  91
+					<li><a href="content-themes.html">Theming content</a></li>
  92
+	
  93
+				</ul>
  94
+		</div>
  95
+	</div>		
  96
+
  97
+</div><!-- /content -->
  98
+
  99
+<div data-role="footer" class="footer-docs" data-theme="c">
  100
+		<p>&copy; 2011 The jQuery Project</p>
  101
+</div>
  102
+	
  103
+</div><!-- /page -->
  104
+
  105
+</body>
  106
+</html>
17  docs/content/content-collapsible.html
@@ -118,22 +118,8 @@
118 118
 		</div>
119 119
 		
120 120
 		<h2>Collapsible sets</h2>
121  
-		<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>
  121
+		<p>It's possible to combine multiple collapsibles into a grouped sets that acts like an accordion widget. <a href="content-collapsible-set.html">Learn more</a></p>
122 122
 		
123  
-		<div data-role="collapsible-set">
124  
-			<div data-role="collapsible">
125  
-				<h3>I'm a header in a set of collapsibles</h3>
126  
-				<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>
127  
-			</div>
128  
-			<div data-role="collapsible" data-collapsed="true" data-theme="a">
129  
-				<h3>I'm a header in a set of collapsibles</h3>
130  
-				<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>
131  
-			</div>
132  
-			<div data-role="collapsible" data-collapsed="true">
133  
-				<h3>I'm a header in a set of collapsibles</h3>
134  
-				<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>
135  
-			</div>
136  
-		</div>
137 123
 		
138 124
 	</div><!--/content-primary -->		
139 125
 	
@@ -149,6 +135,7 @@
149 135
 					<li><a href="content-html.html">Basic HTML styles</a></li>
150 136
 					<li><a href="content-grids.html">Layout grids (columns)</a></li>
151 137
 					<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
  138
+					<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
152 139
 					<li><a href="content-themes.html">Theming content</a></li>
153 140
 	
154 141
 				</ul>
1  docs/content/content-grids.html
@@ -151,6 +151,7 @@
151 151
 						<li><a href="content-html.html">Basic HTML styles</a></li>
152 152
 						<li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
153 153
 						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
  154
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
154 155
 						<li><a href="content-themes.html">Theming content</a></li>
155 156
 	
156 157
 				</ul>
1  docs/content/content-html.html
@@ -123,6 +123,7 @@
123 123
 						<li data-theme="a"><a href="content-html.html">Basic HTML styles</a></li>
124 124
 						<li><a href="content-grids.html">Layout grids (columns)</a></li>
125 125
 						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
  126
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
126 127
 						<li><a href="content-themes.html">Theming content</a></li>
127 128
 	
128 129
 				</ul>
1  docs/content/content-themes.html
@@ -101,6 +101,7 @@
101 101
 						<li><a href="content-html.html">Basic HTML styles</a></li>
102 102
 						<li><a href="content-grids.html">Layout grids (columns)</a></li>
103 103
 						<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
  104
+						<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
104 105
 						<li data-theme="a"><a href="content-themes.html">Theming content</a></li>
105 106
 	
106 107
 				</ul>
1  docs/content/index.html
@@ -31,6 +31,7 @@
31 31
 			<li><a href="content-html.html">Basic HTML styles</a></li>
32 32
 			<li><a href="content-grids.html">Layout grids (columns)</a></li>
33 33
 			<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
  34
+			<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
34 35
 			<li><a href="content-themes.html">Theming content</a></li>
35 36
 			<!--<li><a href="api-content.html">API documentation</a></li>-->
36 37
 		</ul>

0 notes on commit a9fc1e0

Please sign in to comment.
Something went wrong with that request. Please try again.