libs/js/jquery-mobile-1.0.1pre/docs/content/content-collapsible-set.html

   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="../../css/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>. 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>
  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-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
  29
  30         <pre><code>
  31 <strong>&lt;div data-role="collapsible-set"&gt;</strong>
  32
  33         &lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;</strong>&gt;
  34         &lt;h3&gt;Section 1&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 2&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 <strong>&lt;/div&gt;</strong>
  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 1</h3>
  52                                 <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>
  53                         </div>
  54                         <div data-role="collapsible">
  55                                 <h3>Section 2</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 3</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 4</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 5</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                 <h2>Theming collapsible content</h2>
  77                 <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>
  78
  79
  80 <pre><code>
  81 &lt;div data-role=&quot;collapsible-set&quot; <strong>data-theme=&quot;c&quot; data-content-theme=&quot;d&quot;</strong>&gt;
  82 </code></pre>
  83
  84
  85                 <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
  86                         <div data-role="collapsible">
  87                                 <h3>Section 1</h3>
  88                                 <p>Collapsible content</p>
  89                         </div>
  90                         <div data-role="collapsible">
  91                                 <h3>Section 2</h3>
  92                                 <p>Collapsible content</p>
  93
  94                         </div>
  95                         <div data-role="collapsible">
  96                                 <h3>Section 3</h3>
  97                                 <p>Collapsible content</p>
  98                         </div>
  99                 </div>
 100
 101
 102                 <h2>Theming individual sections</h2>
 103                 <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>
 104
 105                 <div data-role="collapsible-set" data-content-theme="c">
 106                         <div data-role="collapsible" data-theme="b" data-content-theme="b">
 107                                 <h3>Section header, swatch B</h3>
 108                                 <p>Collapsible content, swatch B</p>
 109
 110                         </div>
 111                         <div data-role="collapsible" data-theme="a" data-content-theme="a">
 112                                 <h3>Section header, swatch A</h3>
 113                                 <p>Collapsible content, swatch A</p>
 114                         </div>
 115                         <div data-role="collapsible" data-theme="e" data-content-theme="d">
 116                                 <h3>Section header, swatch E</h3>
 117                                 <p>Collapsible content, swatch D</p>
 118                         </div>
 119                 </div>
 120
 121         </div><!--/content-primary -->
 122
 123         <div class="content-secondary">
 124
 125                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 126
 127                                 <h3>More in this section</h3>
 128
 129                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
 130
 131                                         <li data-role="list-divider">Content Formatting</li>
 132                                         <li><a href="content-html.html">Basic HTML styles</a></li>
 133                                         <li><a href="content-grids.html">Layout grids (columns)</a></li>
 134                                         <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
 135                                         <li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
 136                                         <li><a href="content-themes.html">Theming content</a></li>
 137
 138                                 </ul>
 139                 </div>
 140         </div>
 141
 142 </div><!-- /content -->
 143
 144 <div data-role="footer" class="footer-docs" data-theme="c">
 145                 <p>&copy; 2011 The jQuery Project</p>
 146 </div>
 147
 148 </div><!-- /page -->
 149
 150 </body>
 151 </html>