libs/js/jquery-mobile-1.1.0/docs/content/content-collapsible.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/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17         <div data-role="page" class="type-interior">
  18
  19                 <div data-role="header" data-theme="f">
  20                         <h1>Collapsible</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 -->
  24
  25                 <div data-role="content">
  26                         <div class="content-primary">
  27                         <h2>Collapsible content</h2>
  28
  29                         <ul data-role="controlgroup" data-type="horizontal" class="localnav">
  30                                 <li><a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
  31                                 <li><a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a></li>
  32                                 <li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a></li>
  33                                 <li><a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a></li>
  34                         </ul>
  35
  36                         <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>
  37
  38                         <p>Directly inside this container, add any header element (H1-H6). 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>
  39
  40                         <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>
  41
  42                         <p>By default, the content will be collapsed.</p>
  43 <pre><code>
  44 &lt;div <strong>data-role=&quot;collapsible&quot;</strong>&gt;
  45    &lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
  46    &lt;p&gt;I&#x27;m the collapsible content. By default I'm closed, but you can click the header to open me.&lt;/p&gt;
  47 &lt;/div&gt;
  48 </code></pre>
  49
  50
  51                         <div data-role="collapsible">
  52                                 <h3>I'm a header</h3>
  53                                 <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
  54                         </div>
  55
  56         <h2>Expanding collapsibles on load</h2>
  57
  58         <p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
  59
  60 <code>
  61 &lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;&gt;</strong>
  62 </code>
  63
  64                 <p>This code will create a collapsible widget like this:</p>
  65
  66
  67                         <div data-role="collapsible" data-collapsed="false">
  68                                 <h3>I'm a header</h3>
  69                                 <p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
  70                         </div>
  71
  72                         <h2>Mini collapsibles</h2>
  73
  74                         <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>
  75
  76                 <code>
  77                 &lt;div data-role=&quot;collapsible&quot; <strong>data-mini=&quot;true&quot;&gt;</strong>
  78                 </code>
  79
  80                 <p>This code will create a mini collapsible widget:</p>
  81
  82                 <div data-role="collapsible" data-mini="true">
  83                         <h3>I'm a mini header</h3>
  84                         <p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
  85                 </div>
  86
  87                 <h2>Icon positioning</h2>
  88                 <p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
  89
  90                 <div data-role="collapsible" data-iconpos="right">
  91                         <h3>I'm a header</h3>
  92                         <p><code>data-iconpos="right"</code></p>
  93                 </div>
  94
  95
  96         <h2>Theming collapsible content</h2>
  97
  98
  99                 <p>Collapsible content is minimally styled &mdash; we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
 100
 101                 <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 will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
 102
 103 <pre><code>
 104 &lt;div data-role=&quot;collapsible&quot; <strong>data-content-theme=&quot;c&quot;</strong>&gt;
 105    &lt;h3&gt;Header swatch A&lt;/h3&gt;
 106    &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "C".&lt;/p&gt;
 107 &lt;/div&gt;
 108 </code></pre>
 109
 110                 <div data-role="collapsible" data-content-theme="c">
 111                         <h3>Header swatch</h3>
 112                         <p>I'm the collapsible content with a themed content block set to "C".</p>
 113                 </div>
 114
 115                 <h2>Theming collapsible headers</h2>
 116                 <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>
 117
 118 <pre><code>
 119 &lt;div data-role=&quot;collapsible&quot; <strong>data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;</strong>&gt;
 120    &lt;h3&gt;Header swatch A&lt;/h3&gt;
 121    &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "A".&lt;/p&gt;
 122 &lt;/div&gt;
 123 </code></pre>
 124
 125                 <div data-role="collapsible" data-theme="a" data-content-theme="a">
 126                         <h3>Header swatch A</h3>
 127                         <p>I'm the collapsible content with a themed content block set to "A".</p>
 128                 </div>
 129
 130
 131
 132                 <div data-role="collapsible" data-theme="b" data-content-theme="d">
 133                         <h3>Header swatch B</h3>
 134                         <p>I'm the collapsible content with a themed content block set to "D".</p>
 135                 </div>
 136
 137
 138
 139                 <h2>Nested Collapsibles</h2>
 140
 141                 <p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
 142                 <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
 143                         <h3>I'm a header</h3>
 144                         <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>
 145
 146                         <div data-role="collapsible" data-theme="c" data-content-theme="c">
 147                                 <h3>I'm a nested collapsible with a child collapsible</h3>
 148                                 <p>I'm a child collapsible.</p>
 149                                         <div data-role="collapsible" data-theme="d" data-content-theme="d">
 150                                                 <h3>Nested inside again.</h3>
 151                                                 <p>Three levels deep now.</p>
 152                                         </div><!-- /section 1A -->
 153                         </div><!-- /section 1 -->
 154
 155
 156                         <div data-role="collapsible" data-content-theme="c">
 157                                 <h3>Section 3: Form elements</h3>
 158                                 <form action="#" method="get">
 159                                         <div data-role="fieldcontain">
 160                                                 <label for="textarea">Textarea:</label>
 161                                                 <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
 162                                         </div>
 163                                         <div data-role="fieldcontain">
 164                                                 <label for="slider">Input slider:</label>
 165                                                 <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
 166                                         </div>
 167                                         <fieldset class="ui-grid-a">
 168                                                         <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
 169                                                         <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
 170                                     </fieldset>
 171                                 </form>
 172                         </div><!-- /section 2 -->
 173
 174                         <div data-role="collapsible" data-content-theme="c">
 175                                 <h3>Section 4: Collapsed list</h3>
 176                                 <p>Here is an inset list:</p>
 177                                 <ul data-role="listview" data-inset="true" data-theme="d">
 178                                         <li><a href="index.html">Acura</a></li>
 179                                         <li><a href="index.html">Audi</a></li>
 180                                         <li><a href="index.html">BMW</a></li>
 181                                         <li><a href="index.html">Cadillac</a></li>
 182                                         <li><a href="index.html">Chrysler</a></li>
 183                                         <li><a href="index.html">Dodge</a></li>
 184                                         <li><a href="index.html">Ferrari</a></li>
 185                                         <li><a href="index.html">Ford</a></li>
 186                                 </ul>
 187                         </div><!-- /section 3 -->
 188                 </div>
 189
 190
 191
 192                 <h2>Collapsible sets (accordions)</h2>
 193                 <p>It's possible to combine multiple collapsibles into a grouped sets that acts like an <a href="content-collapsible-set.html">accordion widget</a>.</p>
 194
 195
 196         </div><!--/content-primary -->
 197
 198         <div class="content-secondary">
 199
 200                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 201
 202                                 <h3>More in this section</h3>
 203
 204                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
 205
 206                                         <li data-role="list-divider">Content Formatting</li>
 207                                         <li><a href="content-html.html">Basic HTML styles</a></li>
 208                                         <li><a href="content-grids.html">Layout grids (columns)</a></li>
 209                                         <li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
 210                                         <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
 211                                         <li><a href="content-themes.html">Theming content</a></li>
 212
 213                                 </ul>
 214                 </div>
 215         </div>
 216
 217 </div><!-- /content -->
 218
 219 <div data-role="footer" class="footer-docs" data-theme="c">
 220                 <p>&copy; 2011-12 The jQuery Foundation</p>
 221 </div>
 222
 223 </div><!-- /page -->
 224
 225 </body>
 226 </html>