Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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
@toddparker toddparker authored
View
106 docs/content/content-collapsible-set.html
@@ -0,0 +1,106 @@
+<!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="../../themes/default/" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../_assets/js/jqm-docs.js"></script>
+ <script src="../../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> 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>
+ <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>
+
+ <pre><code>
+&lt;div data-role="collapsible-set"&gt;
+
+ &lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;false&quot;&gt;
+ &lt;h3&gt;Section A&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 B&lt;/h3&gt;
+ &lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
+ &lt;/div&gt;
+
+&lt;div&gt;
+ </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 A</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 B</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 C</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 D</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 E</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>
+
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b">
+
+ <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>
View
17 docs/content/content-collapsible.html
@@ -118,22 +118,8 @@
</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>
+ <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>
- <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-collapsed="true" data-theme="a">
- <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-collapsed="true">
- <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-primary -->
@@ -149,6 +135,7 @@
<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>
View
1  docs/content/content-grids.html
@@ -151,6 +151,7 @@
<li><a href="content-html.html">Basic HTML styles</a></li>
<li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
<li><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>
View
1  docs/content/content-html.html
@@ -123,6 +123,7 @@
<li data-theme="a"><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><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
</ul>
View
1  docs/content/content-themes.html
@@ -101,6 +101,7 @@
<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><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li data-theme="a"><a href="content-themes.html">Theming content</a></li>
</ul>
View
1  docs/content/index.html
@@ -31,6 +31,7 @@
<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><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
<!--<li><a href="api-content.html">API documentation</a></li>-->
</ul>
Please sign in to comment.
Something went wrong with that request. Please try again.