1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
|
<!DOCTYPE html>
<html>
<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-1.2.0.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Collapsible</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Collapsible content</h2>
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
<li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
<li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
<li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute. Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsibles.</p>
<p>Directly inside this container, add any header (H1-H6) or legend element. 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>
<p>By default, the content will be collapsed.</p>
<pre><code>
<div <strong>data-role="collapsible"</strong>>
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
</code></pre>
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<h2>Expanding collapsibles on load</h2>
<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
<code>
<div data-role="collapsible" <strong>data-collapsed="false"></strong>
</code>
<p>This code will create a collapsible widget like this:</p>
<div data-role="collapsible" data-collapsed="false">
<h3>I'm a header</h3>
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
</div>
<h2>Non-inset collapsibles</h2>
<p>By default collapsibles have an inset appearance. To make them full width without corner styling add the <code>data-inset="false"</code> attribute to the element.</p>
<code>
<div data-role="collapsible" <strong>data-inset="false"></strong>
</code>
<p>This code will create a non-inset collapsible:</p>
<div data-role="collapsible" data-inset="false">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
<h2>Mini collapsibles</h2>
<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
<code>
<div data-role="collapsible" <strong>data-mini="true"></strong>
</code>
<p>This code will create a mini collapsible widget:</p>
<div data-role="collapsible" data-mini="true">
<h3>I'm a mini header</h3>
<p>I'm the collapsible content.</p>
</div>
<h2>Custom icons</h2>
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. In the example below, <code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code>.</p>
<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<h3>I have custom icons</h3>
<p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p>
</div>
<h2>Icon positioning</h2>
<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
<div data-role="collapsible" data-iconpos="right">
<h3>I'm a header</h3>
<p><code>data-iconpos="right"</code></p>
</div>
<h2>Theming collapsible content</h2>
<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 within which it sits.</p>
<p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This applies the swatch's border and <em>flat</em> background color (not the gradient) to the content block, removes the rounded corners from the bottom of the header, and gives the bottom of the content block rounded corners to visually group these elements.</p>
<pre><code>
<div data-role="collapsible" <strong>data-content-theme="c"</strong>>
<h3>Header</h3>
<p>I'm the collapsible content with a themed content block set to "c".</p>
</div>
</code></pre>
<div data-role="collapsible" data-content-theme="c">
<h3>Header</h3>
<p>I'm the collapsible content with a themed content block set to "c".</p>
</div>
<h2>Theming collapsible headers</h2>
<p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
<pre><code>
<div data-role="collapsible" <strong>data-theme="a" data-content-theme="a"</strong>>
<h3>Header swatch A</h3>
<p>I'm the collapsible content with a themed content block set to "a".</p>
</div>
</code></pre>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Header swatch A</h3>
<p>I'm the collapsible content with a themed content block set to "a".</p>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="d">
<h3>Header swatch B</h3>
<p>I'm the collapsible content with a themed content block set to "d".</p>
</div>
<h2>Nested Collapsibles</h2>
<p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide a clearer visual connection between the levels.</p>
<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
<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" data-theme="c" data-content-theme="c">
<h3>I'm a nested collapsible with a child collapsible</h3>
<p>I'm a child collapsible.</p>
<div data-role="collapsible" data-theme="d" data-content-theme="d">
<h3>Nested inside again.</h3>
<p>Three levels deep now.</p>
</div><!-- /section 1A -->
</div><!-- /section 1 -->
<div data-role="collapsible" data-content-theme="c">
<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 2 -->
<div data-role="collapsible" data-content-theme="c">
<h3>Section 4: Collapsed list</h3>
<p>Here is an inset list:</p>
<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 3 -->
</div>
<h2>Collapsible sets (accordions)</h2>
<p>It's possible to combine multiple collapsibles into a grouped set that acts like an <a href="content-collapsible-set.html">accordion widget</a>.</p>
</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 data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><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 class="jqm-version"></p>
<p>© 2012 jQuery Foundation and other contributors</p>
</div>
</div><!-- /page -->
</body>
</html>
|
