snippets/collapsibles.html

   1 <!--
   2         jQuery Mobile Boilerplate
   3 -->
   4 <!doctype html>
   5 <html>
   6 <head>
   7         <meta charset="utf-8">
   8         <meta name="viewport" content="width=device-width, initial-scale=1">
   9         <title> jQuery Mobile Boilerplate </title>
  10         <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  11
  12         <!-- if you have a custom theme, add it here -->
  13         <link rel="stylesheet"  href="themes/jQuery-Mobile-Boilerplate.css" />
  14
  15         <link rel="stylesheet" href="css/custom.css" />
  16
  17         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  18         <script src="js/application.js"></script>
  19         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  20
  21 </head>
  22 <body>
  23         <div data-role="page">
  24
  25                 <div data-role="header">
  26                         <a href="../index.html" data-icon="home">Home</a>
  27                         <h1>Collapsible Content</h1>
  28                 </div>
  29
  30                 <div data-role="content">
  31
  32
  33
  34
  35 <h2>Collapsible Content Blocks</h2>
  36
  37 <div data-role="collapsible">
  38         <h3>Content header</h3>
  39         <p>I'm the content that shows/hides when you click the header just above me.</p>
  40 </div>
  41
  42 <h2>Default to open</h2>
  43
  44 <div data-role="collapsible" data-collapsed="false">
  45         <h3>Content header</h3>
  46         <p>I'm the content that shows/hides when you click the header just above me.</p>
  47 </div>
  48
  49 <h2>Themed</h2>
  50
  51 <div data-role="collapsible" data-content-theme="c">
  52         <h3>Content header</h3>
  53         <p>I'm the content that shows/hides when you click the header just above me.</p>
  54 </div>
  55
  56 <h2>Themed - content only</h2>
  57
  58 <div data-role="collapsible" data-theme="b" data-content-theme="e" >
  59         <h3>Content header</h3>
  60         <p>I'm the content that shows/hides when you click the header just above me.</p>
  61 </div>
  62
  63 <h2>Nested Collapsibles</h2>
  64
  65 <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
  66         <h3>Outer header</h3>
  67         <p>I'm the content inside the main collapsible.</p>
  68
  69         <div data-role="collapsible" data-theme="c" data-content-theme="c">
  70                 <h3>I'm a nested collapsible with a child collapsible</h3>
  71                 <p>I'm a child collapsible.</p>
  72                 <div data-role="collapsible" data-theme="d" data-content-theme="d">
  73                         <h3>Nested inside again.</h3>
  74                         <p>Three levels deep now.</p>
  75                 </div>
  76         </div>
  77
  78         <div data-role="collapsible" data-content-theme="c">
  79                 <h3>Collapsed list</h3>
  80                 <ul data-role="listview" data-inset="true" data-theme="d">
  81                         <li><a href="index.html">red</a></li>
  82                         <li><a href="index.html">blue</a></li>
  83                         <li><a href="index.html">yellow</a></li>
  84                 </ul>
  85         </div><!-- /section 3 -->
  86 </div>
  87
  88
  89
  90                 </div>
  91
  92                 <div data-role="footer" data-theme="c">
  93                         <p>&copy; 2012 - jQuery Mobile Boilerplate</p>
  94                 </div>
  95
  96         </div>
  97 </body>
  98 </html>