5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>jQuery Mobile Docs - Collapsible Content</title>
7 <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
8 <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
10 <script src="../../js/jquery.js"></script>
11 <script src="../../docs/_assets/js/jqm-docs.js"></script>
12 <script src="../../js/"></script>
17 <div data-role="page" class="type-interior">
19 <div data-role="header" data-theme="f">
20 <h1>Collapsible set</h1>
21 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
22 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
23 </div><!-- /header -->
25 <div data-role="content">
26 <div class="content-primary">
27 <h2>Collapsible set (accordion)</h2>
29 <ul data-role="controlgroup" data-type="horizontal" class="localnav">
30 <li><a href="content-collapsible-set.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
31 <li><a href="content-collapsible-set-options.html" data-role="button" data-transition="fade">Options</a></li>
32 <li><a href="content-collapsible-set-methods.html" data-role="button" data-transition="fade">Methods</a></li>
33 <li><a href="content-collapsible-set-events.html" data-role="button" data-transition="fade">Events</a></li>
36 <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>
37 <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>
40 <strong><div data-role="collapsible-set"></strong>
42 <div data-role="collapsible" <strong>data-collapsed="false"</strong>>
43 <h3>Section 1</h3>
44 <p>I'm the collapsible set content for section B.</p>
47 <div data-role="collapsible">
48 <h3>Section 2</h3>
49 <p>I'm the collapsible set content for section B.</p>
52 <strong></div></strong>
56 <p>Here is an example of a collapsible set with 5 sections.</p>
58 <div data-role="collapsible-set">
59 <div data-role="collapsible" data-collapsed="false">
61 <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>
63 <div data-role="collapsible">
65 <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 <div data-role="collapsible">
69 <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>
71 <div data-role="collapsible">
73 <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>
75 <div data-role="collapsible">
77 <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>
81 <h2>Mini collapsible sets</h2>
83 <p>For a more compact version that is useful in 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>
85 <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
86 <div data-role="collapsible">
88 <p>Collapsible content</p>
90 <div data-role="collapsible">
92 <p>Collapsible content</p>
95 <div data-role="collapsible">
97 <p>Collapsible content</p>
101 <h2>Icon positioning</h2>
102 <p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
104 <div data-role="collapsible-set" data-theme="c" data-iconpos="right">
105 <div data-role="collapsible">
107 <p>Inherits icon positioning from <code>data-iconpos="right"</code> attribute on parent.</p>
109 <div data-role="collapsible" data-iconpos="left">
111 <p>data-iconpos="left"</p>
113 <div data-role="collapsible" data-iconpos="bottom">
115 <p>data-iconpos="bottom"</p>
117 <div data-role="collapsible" data-iconpos="top">
119 <p>data-iconpos="top"</p>
125 <h2>Theming collapsible content</h2>
126 <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>
130 <div data-role="collapsible-set" <strong>data-theme="c" data-content-theme="d"</strong>>
134 <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
135 <div data-role="collapsible">
137 <p>Collapsible content</p>
139 <div data-role="collapsible">
141 <p>Collapsible content</p>
144 <div data-role="collapsible">
146 <p>Collapsible content</p>
150 <h2>Theming individual sections</h2>
151 <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>
153 <div data-role="collapsible-set" data-content-theme="c">
154 <div data-role="collapsible" data-theme="b" data-content-theme="b">
155 <h3>Section header, swatch B</h3>
156 <p>Collapsible content, swatch B</p>
158 <div data-role="collapsible" data-theme="a" data-content-theme="a">
159 <h3>Section header, swatch A</h3>
160 <p>Collapsible content, swatch A</p>
162 <div data-role="collapsible" data-theme="e" data-content-theme="d">
163 <h3>Section header, swatch E</h3>
164 <p>Collapsible content, swatch D</p>
168 </div><!--/content-primary -->
170 <div class="content-secondary">
172 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
174 <h3>More in this section</h3>
176 <ul data-role="listview" data-theme="c" data-dividertheme="d">
178 <li data-role="list-divider">Content Formatting</li>
179 <li><a href="content-html.html">Basic HTML styles</a></li>
180 <li><a href="content-grids.html">Layout grids (columns)</a></li>
181 <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
182 <li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
183 <li><a href="content-themes.html">Theming content</a></li>
189 </div><!-- /content -->
191 <div data-role="footer" class="footer-docs" data-theme="c">
192 <p>© 2011-12 The jQuery Foundation</p>